在 React 中插入动态 HTML 元素

Posted 2023-02-22

【中文标题】在 React 中插入动态 HTML 元素

【英文标题】：Interpolate a dynamic HTML element in React

【发布时间】：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？

【参考方案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?