javascript - 危险地 react SetInnerHTML 以呈现从 Prop 嵌入的 iframe youtube？

Question

有人知道如何在 React 中将此 prop 属性获取到 stringToHTML 吗？提前致谢!

var Video = React.createClass({

getDefaultProps: function getDefaultProps() {

        return propsObj;
},

createMarkup: function() { 

    return {__html: {this.props.video}}; 
},

  render: function() {
    return (

      <div className="video-container no-controls" id="player" dangerouslySetInnerHTML={createMarkup()} />
    );
  }
});

Answer 1

React 中的 HTML 注入(inject)具有如此繁琐的 API 是有原因的:强烈建议不要使用它。

对于像 YouTube 视频 iframe 这样简单的东西，为什么要使用 HTML 注入(inject)并不明显。它的标记是可以预见的。

我强烈建议你用 JSX 重写它。这是我在最近的项目中使用的 YouTube 组件的代码。

const YouTubeVideo = ({ id }) => (

    <div className="youtube-wrapper">
        <div className="youtube">
            <iframe
                className="youtube-frame"
                src={`https://www.youtube.com/embed/${id}?autoplay=1`}
                allowFullScreen
            />
        </div>
    </div>

);