一开始我想做的很简单,但是我从 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 中完成。
最佳答案
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
);
关于javascript - 使用 react.js 渲染自定义 html 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40960411/