首先，我想做的事情很容易，但是我从webpack收到了一个（显然完全没用的）错误，我想知道如何解决这个问题，我想由React来渲染一个简单的“ custom”标签。代码如下：
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中完成。
我的最初答案不正确，您不能直接使用变量，而需要使用Felix的answer中描述的createElement方法。如下所述，在我最初链接的博客文章中，您可以使用对象属性，因此，我给出了一个示例，希望它可以用作对问题的解答。
class Hello extends React.Component {
constructor() {
super();
this.state = {
tagName: "h1"
};
}
sizeChange(i) {
this.setState({
tagName: 'h' + i
});
}
changeButtons() {
var buttons = [];
for (let i=1; i<=6; i++) {
buttons.push(<button onClick={() => this.sizeChange(i)}>H{i}</button>);
}
return buttons;
}
render() {
return (
<div>
{this.changeButtons()}
<this.state.tagName>
Change Me
</this.state.tagName>
</div>
);
}
}
可以做到，尽管我认为它不受官方支持，所以将来可能会在没有警告的情况下中断。需要注意的是，为标签选择的变量名称不能与HTML元素相同。
var Demo = React.createClass({
render: function() {
const elementTag = 'h' + ele.title.importance;
return(
<elementTag>
Header x contents
</elementTag>
);
}
});
可以在此处找到更多说明和更完整的示例
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句