Question

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

Answer 1

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

但正如方法名称所示：你应该非常确定你在那里做了什么以及它带来的安全隐患。

Answer 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呈现为react组件

2 个答案: