React中如何用JSX在自定义组件与HTML button间切换渲染？

直接把字符串'button'填入空白处即可，完全符合JSX写法，不需要额外包装组件或使用React.createElement：

const ComponentToRender = renderBadger ? Badger : 'button';

完整示例代码 #

import { Badger } from './components';

const renderBadger = true;

const Snake = () => {
    const ComponentToRender = renderBadger ? Badger : 'button';
    // 同样可以给原生元素传递props
    return <ComponentToRender type="button" onClick={() => console.log('触发点击')}>
        {renderBadger ? 'Badger组件' : '原生按钮'}
    </ComponentToRender>;
};

原理 #

React的JSX编译逻辑很直接：

• 当变量是大写开头时，会被当作自定义React组件处理
• 当变量是小写字符串（对应原生HTML标签名）时，会编译为对应的原生HTML元素，和用React.createElement效果一致，但写法更贴近JSX习惯

内容的提问来源于stack exchange，提问作者nullromo