使用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元素。 sometag未被解析为变量。

你也做不到你上面所示的。 JSX表达式无效代替标记名称 。

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

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

Answer 2

编辑

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

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