使用react.js呈现自定义html标记(Rendering custom html tag with react.js)

使用react.js呈现自定义html标记(Rendering custom html tag with react.js)

我想要做的事情很简单，但是我从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中完成。

What I'm trying to do is quite easy at first however I get an (obviously completely useless) error from webpack and I'm wondering how it can be fixed, I want a simple "custom" tag to be rendered by React, the code is as follows:

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

Basically instead of having a predefined tag I want to have my own {template} tag, I know in this situation there would be work arounds for this (e.g. defining a className with my "importance" value and adding some css for that), but for the sake of science I'd like to know how (and if) this can be done in react/jsx.

最满意答案

编辑

我的初步答案不正确，你不能直接使用变量，需要使用Felix的答案中描述的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> ); } }

JSFiddle在这里

原始答案

它可以做到，虽然我不认为它是官方支持的，所以可能在未经警告的情况下打破。 这种方法的警告是，您为标记选择的变量名称不能与HTML元素相同。

var Demo = React.createClass({ render: function() { const elementTag = 'h' + ele.title.importance; return( <elementTag> Header x contents </elementTag> ); } });

这里可以找到更多解释和更全面的例子

Edit

My initial answer was not correct, you cannot use a variable directly and would need to use the createElement method described in Felix's answer. As noted below, and utilised in the blog post I originally linked, you can use object properties, so I've made an example of this, which hopefully will be useful as an answer to the question.

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> ); } }

JSFiddle here

Original Answer

It can be done, although I don't think it is officially supported so may break in the future without warning. The caveat to this approach is that the variable name you choose for your tag cannot be the same as an HTML element.

var Demo = React.createClass({ render: function() { const elementTag = 'h' + ele.title.importance; return( <elementTag> Header x contents </elementTag> ); } });

More explanation and a fuller example can be found here