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>

);

使用dangerouslySetInnerHTML来渲染从道具嵌入的iframe youtube？

1 个答案: