我有以下组件:
export default class VideoArchiveContent extends React.Component {
constructor() {
super();
this.state = {
videos: []
}
}
componentDidMount() {
this.VideosTracker = Tracker.autorun(() => {
Meteor.subscribe('videos');
const videos = Videos.find().fetch();
this.setState({ videos })
});
};
componentWillUnmount() {
this.VideosTracker.stop();
};
renderVideos = () => {
return this.state.videos.map((video) => {
return <div key={video._id}>{video.embed}</div>
});
};
render() {
return (
<div>
{this.renderVideos()}
</div>
)
}
};
我期待iframe呈现在屏幕上。呈现的是iframe字符串。
如果我将iframe放在return语句中,如下所示:
return (
<div>
<iframe src="https://player.vimeo.com/video/270962511" width="500" height="281" frameborder="0" allowfullscreen></iframe>
</div>
)
iframe按预期呈现。
有解决方案吗?
答案 0 :(得分:4)
我不确定iframe
来自哪里,因为我在您的代码中看不到HTML
代码,因此我猜测它即将来临从服务器作为字符串。可能在video.embed
里面
如果是这种情况,那么您需要使用dangerouslySetInnerHTML
属性来呈现:
return <div key={video._id} dangerouslySetInnerHTML={{__html:video.embed}} />
请谨慎使用,我建议先在DOCS中阅读。
运行示例:
const tweetersIframe = '<iframe src="https://platform.twitter.com/widgets/tweet_button.html" />'
const App = () => (
<div dangerouslySetInnerHTML={{ __html: tweetersIframe}}>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
&#13;
<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="root"></div>
&#13;