反应不将 HTML 字符串从 JSON 转换为文本答案

【问题标题】：React not turning HTML string from JSON into text反应不将 HTML 字符串从 JSON 转换为文本
【发布时间】：2018-03-11 15:45:33
【问题描述】：

我对 React.js 及其处理存储在变量中的文本的方式有疑问。

这是使用 DOM 的样子：

let text = "Must credit to &quot;https://indepthguide.com/&quot; not Flickr.\nCopy Link Address: <a href=\"https://indepthguide.com/\" rel=\"nofollow\">indepthguide.com/</a>"

document.getElementById("root").innerHTML = text;

&lt;p id="root"&gt;&lt;/p&gt;

这就是它在 React.js 中的样子。

var text = "Must credit to &quot;https://indepthguide.com/&quot; not Flickr.\nCopy Link Address: <a href=\"https://indepthguide.com/\" rel=\"nofollow\">indepthguide.com/</a>";

class Text extends React.Component {
  render() {
    return <h3 >{
      text
    } < /h3>;
  }
}


ReactDOM.render( <
  Text / > ,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

我尝试过new DOMParser();，但没有成功，因为它开始抛出错误，我不确定如何处理它。我真的不知道该怎么做，现在尝试了很长时间：D。

【问题讨论】：

这是 JSX 糟糕的众多原因之一。 shripadk.github.io/react/docs/jsx-gotchas.html

标签： javascript html reactjs

【解决方案1】：

默认情况下，React 不允许从字符串变量创建标签，因为这太危险了。如果有必要，您可以使用dangerouslysetinnerhtml。请通过此链接阅读文档https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

【讨论】：

你能给我一个如何使用它的例子吗？
@saem 将<h3 >{ text } < /h3> 替换为<h3 dangerouslySetInnerHTML={{__html: text}} >< /h3>。注意还有__html。

【解决方案2】：

作为最后的手段，您始终可以插入原始 HTML。

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

https://shripadk.github.io/react/docs/jsx-gotchas.html

var text = "Must credit to &quot;https://indepthguide.com/&quot; not Flickr.\nCopy Link Address: <a href=\"https://indepthguide.com/\" rel=\"nofollow\">indepthguide.com/</a>";

class Text extends React.Component {
  render() {
    return <h3 dangerouslySetInnerHTML={{__html:text}} />
  }
}

ReactDOM.render( <
  Text / > ,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案3】：

对于所有其他答案，最好补充一点，您应该保护这些部分免受脚本注入攻击。像DomPurify 这样的库应该可以帮助你。

【讨论】：

【解决方案4】：

还有另一个插件可以帮助 HTML 标签在页面上呈现。

https://www.npmjs.com/package/react-html-parser

在我看来，与dangerouslySet InnerHTML 相比，这是一种更简单的方法。

【讨论】：