在 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

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

_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;
}

Answer 2

在像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>

Answer 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'));

这可能会有帮助：

在 React 中插入一个动态 HTML 元素

Interpolate a dynamic HTML element in React

jsx

reactjs