ReactJS 如何使用JSX实现动态传入自定义类型创建元素？

当然可以通过JSX实现完全相同的效果，只需要注意JSX的语法规则即可。

实现方式 #

JSX 规定：小写开头的标签会被识别为HTML原生内置标签，要使用变量作为标签类型，必须先将其赋值给一个首字母大写的变量。

改写后的代码如下：

function Header(props) {
  // 把props传入的元素类型赋值给首字母大写的变量
  const Element = props.element;
  return <Element>Hello world!</Element>;
}

注意事项 #

• 不能直接写 <props.element />，这种写法JSX无法正常解析，必须先赋值给首字母大写的变量再使用
• 传入的props.element既可以是h1、div这类字符串形式的原生标签名，也可以是自定义的React函数组件/类组件，都可以正常渲染
• 如果需要透传其他属性到动态元素上，可以结合展开运算符使用：

  function Header(props) {
    // 取出element属性，剩余属性全部透传给动态元素
    const { element: Element, ...restProps } = props;
    return <Element {...restProps}>Hello world!</Element>;
  }
  

  调用时传入的额外属性都会绑定到最终渲染的元素上：

  // 最终会渲染出带id、className属性的h2标签
  <Header element="h2" id="page-title" className="text-2xl font-bold" />
  

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