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

這里可以找到更多解釋和更全面的例子