循环遍历 html 元素 jsx 数组

Question

I have an array of html elements, lets say messages. And i want to render them as follow:

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

And in render method:

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

But during my rendering instead of getting the message with appropriate style im getting the entire element as string:

Answer 1

if you have html tags in state array you can use like this-

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 }} />
        ))}
      </>
    );
  }
}

Live working demo https://codesandbox.io/s/quizzical-leftpad-p3hib

Answer 2

Do it using dangerouslySetInnerHTML feature from React. There is an example in the below link.

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

Answer 3

First of all, you should never mutate state , which is ground rule of react.

Coming to issue, you're pushing a string , instead what you should be doing is

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

and then loop through this array in render() method like

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