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

Question

一开始我想做的事情很简单，但是我从 webpack 收到一个（显然完全没用的）错误，我想知道如何修复它，我想要一个简单的 "custom" 标签由React渲染，代码如下：

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

基本上，我不想拥有预定义的标签，而是想拥有自己的 {template} 标签，我知道在这种情况下会有解决方法（例如，用我的 "importance" 值定义一个 className 并添加一些 css），但为了科学起见，我想知道如何（以及是否）可以在 react/jsx.

中完成

Answer 1

JSX 不允许你使用 dynamic 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
);

Answer 2

编辑

我最初的回答是不正确的，你不能直接使用变量，需要使用中描述的 createElement 方法。如下所述，并在我最初链接的博客 post 中使用，您可以使用对象属性，所以我做了一个例子，希望它会有用问题的答案。

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

原答案

可以做到，虽然我不认为它得到官方支持，所以将来可能会在没有警告的情况下中断。这种方法的注意事项是您为标签选择的变量名称不能与 HTML 元素相同。

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

可以找到更多解释和更完整的示例 here

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

Rendering custom html tag with react.js

html

javascript

jsx

ecmascript-6

reactjs

编辑

原答案