如何将 HTML 渲染成反应组件答案

【问题标题】：How to render the HTML into react component如何将 HTML 渲染成反应组件
【发布时间】：2016-09-21 09:45:56
【问题描述】：

我想将来自某个外部源的纯 HTML 渲染到 react 组件中。我看到人们谈论一些转换工具（HTML 到 JSX）的解决方案很少，但我想处理我的组件中的所有内容，因此在安装它时会获得 HTML 响应并需要渲染。

【问题讨论】：

【解决方案1】：

function createMarkup() { return {__html: 'First &middot; Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />

但正如方法名称所暗示的那样：您应该非常确定自己在其中做什么以及它所具有的安全隐患。

【讨论】：

是的..如果你不知道来源永远不要使用。如果有人在 html 中嵌入了恶意 Javacript，而您调用了该 API，则可能会产生后果
我正在使用 'react-HTML-parser' 将 HTML 正确渲染到 reactJS 组件中，但现在我面临另一个问题。它需要 HTML 作为字符串，我不确定如何将 HTML 字符串化？示例：我想要 '
Hello
而不是
Hello

【解决方案2】：

这应该不难做到。将您的 HTML 分配给一个 div，然后使用 {variable name} 渲染它 JSX 允许您这样做，并且通过 ES6 集成，您还可以使用 class 而不是 className。

var Hello = React.createClass({
  
  render: function() {
  var htmlDiv = <div>How are you</div>
    return <div>Hello {this.props.name}
    		{htmlDiv}
    </div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

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


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

【讨论】：

这仅适用于预定义元素，不适用于来自外部源的 HTML 字符串。