Reactjs React/JSX如何将内置HTML类型指定为变量

我正在构建一个组件，该组件将使用本机html类型作为其根元素。为了简单起见，我们可以说是

或

。使用用户定义的组件执行此操作很容易，因为它们只是可以传递的函数：

function MyWrapper(props) {
  const Element = props.element;
  <Element ...>
    ...
  </Element>
}

<MyWrapper element={MyComponent} />

但是我觉得我缺少了一些关于jsx的东西，因为我需要为内置组件定义一个函数。有没有另一种方法可以引用动态但内置的组件类型，而无需在一堆本机html组件周围定义包装器？

问题 您正在尝试定义什么是

th

元素

解决方案 将html元素作为字符串传递

<MyWrapper element={"th"} />

演示

函数MyWrapper（{children，element:element}）{
返回{children}；
}
常量MyComponent=（{children}）=>{children}；
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
我的组件
试验
试验
试验
);
}

---

啊，就用吧。一个字符串，很简单。我没有意识到这是内置的，但这对于如何将其编译成

React.createElement

来说是有意义的，它也可以接受一个字符串。谢谢

<MyWrapper element={"th"} />

function MyWrapper({ children, element: Element }) {
  return <Element>{children}</Element>;
}

const MyComponent = ({ children }) => <div>{children}</div>;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <MyWrapper element={MyComponent}>My Component</MyWrapper>
      <MyWrapper element={"th"}>Test</MyWrapper>
      <MyWrapper element={"td"}>Test</MyWrapper>
      <MyWrapper element={"li"}>Test</MyWrapper>
    </div>
  );
}