reactjs - 在 React 中插入动态 HTML 元素

Question

我有以下 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？

Answer 1

在 map 中使用 React.createElement() 函数，例如 React.createElement(item.element, null, item.text)

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>