Question

我和react-draft-wysiwyg编辑一起玩。我进步得很好。但现在我卡住了如何显示编辑器的输出。

例如，假设body是wysiwyg编辑器的输出：

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

现在输出完全相同的html，标签显示没有格式化。

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

我想要这样的事情：

示例文字粗体和斜体

在jQuery中我只想设置div标签的html属性。但我不知道如何在React中采用正确的方法。我可以只是获取对div的引用并以某种方式更新它就像在jQuery中一样吗？它是否与虚拟Dom一起使用？

Answer 1

尝试插入属性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

尝试删除双引号，或者如果您想保留双引号，可以使用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

如果你想保留双引号，你也可以危险地设置innerHTML：

   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

您可以使用dangerouslySetInnerHTML在反应组件中呈现html：

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

...

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

在

5 个答案: