Question

我有一个提供Wordpress博客帖子的组件。博客文章包含常规文本/ html标记，有时还包括带有元素的youtube嵌入。 dangerouslySetInnerHTML删除了这个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发生变化时，请确保销毁并重新创建元素（“关键”道具对此有利）。

做出危险的SetInnerHTML和iframe

1 个答案: