使用dangerouslySetInnerHTML来渲染从道具嵌入的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注入具有如此繁琐的API是有原因的:强烈建议不要使用它.

为什么你想要将HTML注入用于像YouTube视频iframe那样简单的事情,这一点并不明显.它的标记是可以预测的.

我强烈建议你在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>

);