javascript - 使用 react.js 渲染自定义 html 标签

Question

一开始我想做的很简单，但是我从 webpack 得到了一个(显然完全没用的)错误，我想知道如何修复它，我想要一个简单的“自定义”标签来呈现React，代码如下:

          let htmlTag = "h" + ele.title.importance;
          let htmlTagEnd = "/h" + ele.title.importance;
          return(
            <{htmlTag} key={elementNumber}>{ele.title.content}<{htmlTagEnd}>
          );

基本上，我不想拥有预定义的标签，而是想要拥有自己的 {template} 标签，我知道在这种情况下会有解决方法(例如，用我的“重要性”值定义一个 className 并为此添加一些 css )，但为了科学起见，我想知道如何(以及是否)可以在 react/jsx 中完成。

Answer 1

JSX 不允许您使用动态 HTML 标签(动态组件可以)。那是因为每当你使用类似 <sometag ... /> 的东西时, 一个标签名称为 sometag 的 HTML 元素被 build 。 sometag未解析为变量。

您也不能执行上面显示的操作。 JSX expressions are not valid in place of a tag name .

相反，您必须调用 React.createElement 直接:

return React.createElement(
  "h" + ele.title.importance,
  {
    key: elementNumber,
  },
  ele.title.content
);