Background

在Reaction中，您可以为组件构造函数使用变量，如下面的代码中的ComponentToRender.

import { Badger, Mushroom } from './components';

const renderBadger = true;

const Snake = () => {
    const ComponentToRender = renderBadger ? Badger : Mushroom;
    return <ComponentToRender />;
};

在这里，我有一个条件(renderBadger)，我根据该条件 Select ComponentToRender的类型.然后，我使用JSX构造适当组件(Badger或Mushroom)的实例.

Question

如果我想在Badger和普通的基本HTMLbutton之间进行 Select ，我应该怎么做？即在下面的空白处填入普通按钮的组件名称.

const ComponentToRender = renderBadger ? Badger : ________;

Temporary Workaround

我知道我可以使用React.createElement(见下文)来实现这一点，但如果可能的话，我更愿意了解如何使用JSX来实现这一点.

const elementName = renderBadger ? Badger : 'button';

return React.createElement(elementName);

Alternative Solution

我还意识到我可以创建一个无操作包装器<button>组件，如下所示:

const Button = (
    props: React.PropsWithChildren<
        React.ButtonHTMLAttributes<HTMLButtonElement>
    >,
) => {
    const { children, ...rest } = props;
    return (
        <button {...rest} type='button'>
            {children}
        </button>
    );
};

但我真的不想介绍一堆毫无意义的包装器.