循环遍历 html 元素数组 jsx答案

【问题标题】：loop through an array of html elements jsx循环遍历 html 元素数组 jsx
【发布时间】：2020-03-17 14:38:38
【问题描述】：

我有一个 html 元素数组，比如说消息。我想将它们呈现如下：

this.state.messages.push('<span className={Styles.success-message}>User successfully added</span>');

在渲染方法中：

     {this.state.messages.map((value, index) => {
         return <div key={index}>{value}</div>
     })}

但是在我的渲染过程中，我没有以适当的样式获取消息，而是将整个元素作为字符串获取：

【问题讨论】：

这能回答你的问题吗？ Rendering raw html with reactjs
您应该尽可能避免使用原始 HTML 字符串，而是管理可以使用 JSX 呈现的数据以充分受益于 React。

标签： javascript reactjs jsx

【解决方案1】：

如果你在状态数组中有 html 标签，你可以像这样使用-

class App extends React.Component {
  state = {
    messages: [
      `<span>User successfully added</span>`,
      `<span>User successfully removed</span>`
    ]
  };
  render() {
    return (
      <>
        {this.state.messages.map((item,index) => (
          <h3 key={index} dangerouslySetInnerHTML={{ __html: item }} />
        ))}
      </>
    );
  }
}

现场工作演示https://codesandbox.io/s/quizzical-leftpad-p3hib

【讨论】：

【解决方案2】：

使用 React 中的 dangerouslySetInnerHTML 特性来实现。以下链接中有一个示例。

https://reactjs.org/docs/dom-elements.html

【讨论】：

【解决方案3】：

首先，你不应该改变 state ，这是 react 的基本规则。

问题来了，你正在推送一个字符串，而不是你应该做的是

let messages =  [];
messages.push(<span className={Styles.success-message}>User successfully added</span>)
this.setState({ messages })

然后在 render() 方法中循环遍历这个数组，比如

this.state.message.map((value, messageIndex) => <div key={messageIndex} > {value} </div>)

【讨论】：