reactjs - React/JSX 如何指定内置 HTML 类型作为变量

Question

我正在构建一个将使用 native html 类型作为其根元素的组件。为简单起见，我们假设 <td>或<th> 。使用用户定义的组件执行此操作很容易，因为它们只是可以传递的函数:

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

<MyWrapper element={MyComponent} />

但是如何传递原生 html 类型，例如 <td>如element ？如果我为我可能想要传入的每种类型定义一个愚蠢的包装函数，我就可以让它工作，例如:

const th = props => <th {...props} />;
<MyWrapper element={th} />

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

Answer 1

问题

您正在尝试定义第 th 元素是什么。

解决方案

将 html 元素作为字符串传递。

<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>
  );
}