ReactJS:以编程方式创建具有自定义类型的元素？

Question

有可能用 JSX 做这件事吗？

function Header(props) {
  return React.createElement(props.element, {}, 'Hello world!');
}

因此返回值可以是 h1、h2、h3 或任何取决于 props 的值。可以用 JSX 做同样的事情吗？

Answer 1

有点，但并非没有某种变量赋值。

自

• <h1 />编译为 React.createElement("h1", null);
• <Thing />编译为 React.createElement(Thing, null);

你基本上可以“欺骗”机器来使用你的动态属性作为元素类型:

function Header(props) {
  const Element = props.element;  // This variable name _must_ be in PascalCase.
  return <Element>Hello world</Element>;
}

编译为

function Header(props) {
  var Element = props.element;
  return React.createElement(Element, null, "Hello world");
}

这符合您的期望。但是，如果 Element是小写的，它不起作用，因为小写的 JSX 标签名称被假定映射到 HTML/SVG 标签并被转换为字符串:

function Header(props) {
  const element = props.element;
  return <element>Hello world</element>;
}

编译为

function Header(props) {
  var element = props.element; // This is unused.
  return React.createElement("element", null, "Hello world");
}