在React中显示纯HTML

Question

I playing with react-draft-wysiwyg editor. I progress quite well. But now I stuck how can I display the output of the editor.

For example, let suppose body is the output of the wysiwyg editor:

function ShowHtml(props) {
  let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
  return (
    <div>
     {body}
    </div>
  )
}

Now the output will be exactly the same html with tags displayed without formatting.

<p>Sample text with <strong>bold</strong> and <em>italic</em></p>

And I would like something like this:

Sample text with bold and italic

In jQuery I would just set the html property of the div tag. But I do not know how to do it the proper way in React. Can I just grab a reference to the div and update it somehow just like in jQuery? Is it working with the virtual Dom?

Answer 1

try to insert as an attribute dangerouslySetInnerHTML={{__html: body}}

  function ShowHtml(props) {
    let body = '<p>Sample text with <strong>bold</strong></p>'
    return (
     <div  dangerouslySetInnerHTML={{__html: body}} />
    )
  }

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

Answer 2

Try removing the double quote or if you wanna keep the double quote you can use dangerouslySetInnerHTML

function ShowHtml(props) {
  let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
  return (
    <div dangerouslySetInnerHTML={{__html: body}}/>


  )
}

Answer 3

If you want to keep the double quotes, You can also setup the innerHTML dangerously:

   function ShowHtml(props) {
      let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
      return (
       <div dangerouslySetInnerHTML={{__html: body}}>

       </div>
      )
    }

Answer 4

function ShowHtml() {
  return (
    <div>
     <p>Sample text with <strong>bold</strong> and <em>italic</em></p>
    </div>
  )
}

Answer 5

You can use dangerouslySetInnerHTML to render html inside react components:

renderBodyContents = () => {
  return {__html: this.state.body}
}

...

render(){
  return(
    <p> dangerouslySetInnerHTML={this.renderBodyContents()}></p>
  )
}