javascript - ReactangerlySetInnerHTML 和 iframe

Question

我有一个可以呈现 Wordpress 博客文章的组件。博客文章包含常规文本/html 标记，有时还包含带有元素的 YouTube 嵌入内容。 angeredlySetInnerHTML 删除此 iframe。我如何支持这种类型的内容。

Answer 1

您可以通过创建一个永不更新的 React 元素来解决这个问题，但在创建时会使用常规 Javascript 插入您想要的 html。请注意，这非常不安全!

const StaticHtml = React.createClass({
  inject( element ) {
     element.innerHTML = this.props.html;
  },
  
  shouldComponentUpdate() {
     return false;   //prevent React updates as it will get confused by the DOM it didn't put there!
  },
  
  render() {
     return <div ref={ this.inject } />
  }
});

const myHtml = `<iframe width="560" height="315" src="https://www.youtube.com/embed/jUjh4DE8FZA" frameborder="0" allowfullscreen></iframe>`;
ReactDOM.render( <StaticHtml html={ myHtml } />, document.getElementById("app") );

<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='app'></div>

你无法更新“html”属性的值，因为 React 会感到困惑，所以请确保每当 html 更改时销毁并重新创建该元素(“key”属性对此很有用)。