在 React 中插入动态 HTML 元素答案

【问题标题】：Interpolate a dynamic HTML element in React在 React 中插入动态 HTML 元素
【发布时间】：2017-02-27 20:16:31
【问题描述】：

我有以下JSON 合约，它被传递给某些组件，这些组件基本上迭代格式并呈现p 元素内的数据。但是，我希望能够设置自定义 HTML 元素，而不是使用默认的 p 元素。

有什么好的技术可以实现这一点？

例如：

// from
const data = [{ text: 'hello' }, { text: 'world' }];
// to 
const data = [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }];

基本上遍历数组中的每个项目并使用它们的自定义 HTML 元素来呈现文本。我知道可以通过使用 React 的非 JSX 语法来实现这一点，但是，这些组件非常复杂，所以我最好使用 JSX。有什么想法吗？也许有一种方法可以将两者结合起来（对自定义元素使用非 JSX 并在其中使用 JSX？

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

在 React.createElement(item.element, null, item.text) 之类的映射中映射使用 React.createElement() 函数

class App extends React.Component {
  constructor(){
    super();
    this.state= {
      data : [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }]
    }
  }
  render() {
    
    return (
      <div>
        {this.state.data.map(function(item) {
          return (React.createElement(item.element, null, item.text)) 
        })}
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：

甚至不知道createElement的存在。
@martinmazadawson 这就是 react 内部使用的，不是 jsx react 语法
是的，当我提到非 JSX 语法时，这就是我所指的。我喜欢这个解决方案...没有尝试将两者混合在一起...

【解决方案2】：

我能想到的一种方法是有一个 switch 语句，例如，如果你有很多，它可能有点太多了，但我现在想不出没有element return 的另一种方法我不确定是否可以直接从后端跨度组件。

_renderElementsFromJSON = (data) => {
    var elements = [];

    for(var i = 0; i < data.length; i++) {
        switch(data[i].element){
            case "span":
                elements.push(<span key={i}>{data[i].text}</span>);
                break;
            case "h1":
                elements.push(<h1 key={i}>{data[i].h1}</span>);
                break;
            //etc
        }
    }
    return elements;
}

【讨论】：

是的，绝对是一种选择，但正如您所提到的，要处理所有情况会很困难。我使用的非 JSX 语法效果很好，但好奇是否有更干净的 JSX 解决方案。

【解决方案3】：

如果创建名称以大写字母开头的变量，则可以使用 JSX 语法：

class App extends React.Component {
  constructor(){
    super();
    this.state= {
      data : [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }]
    }
  }
  render() {
    return (
      <div>
        {this.state.data.map((item) => {
          const Element = item.element; // Note that this "Element" variable must begin with capital letter.
          return <Element>{item.text}</Element>;
        })}
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

这可能会有所帮助：ReactJS component names must begin with capital letters?

【讨论】：