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元素。 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
);

使用react.js呈现自定义html标记

1 个答案: