如何使用 ReactJS 重新渲染 this.setState 的 i 帧？

Question

在组件中，每次单击按钮时我都会更改状态。状态是 iframe 的 url。 事实是，单击按钮确实会更改状态（打印出来时有效），但不会使用新 url 重新呈现 iFrame。怎么会？

import React, { Component } from 'react';

class VeryGoodConcept extends Component {

constructor(props) {
    super(props);

    this.state = { url: 'https://www.youtube.com/watch?v=g_ZKq471B2k' };
    this.changeVideo = this.changeVideo.bind(this);
}

changeVideo = (url) => {
    this.setState({ url });
    console.log(this.state.url);
}


render() {
    return (
        <div className="very-good-concept text-center">
            <h2 className="default-title">Le Very Good Concept</h2>
            <div className="row" id="video-row">
                <div className="col">
                    <button onClick={() => this.changeVideo("https://www.youtube.com/watch?v=E_tlTXHAfBs")} className="btn video-btn"><h5><i className="fa fa-handshake-o"></i>   Le caractère caritatif ?</h5></button>
                    <div className="caritative text-right">

                    </div>
                </div>
                <div className="col presentation-video">
                    <iframe src={this.state.url}></iframe>
                </div>
                <div className="col">
                    <button onClick={() => this.changeVideo("https://www.youtube.com/watch?v=FuDv-sPXNoA")} className="btn video-btn"><h5><i className="fa fa-eur"></i>   La réduction fiscale ?</h5></button>
                    <div className="red-fiscale text-left">

                    </div>
                </div>
            </div>
            <button onClick={() => this.changeVideo("https://www.youtube.com/watch?v=g_ZKq471B2k")} className="btn video-btn"><h5><i className="fa fa-users"></i>   Comment ca marche ?</h5></button>
        </div>
    );
}
}


 export default VeryGoodConcept;

编辑：问题出在我使用的 IFrame 库上，它与 React 不兼容...

Answer 1

只需添加一个键，您可以在需要重新呈现 iframe 时手动更改该键。由于您希望 iframe 在视频 url 更改时重新呈现，只需将其用作键：

<iframe key={this.state.url} src={this.state.url}></iframe>

如何使用 ReactJS 重新渲染 this.setState 的 i 帧？

How to re-render an i frame with this.setState using ReactJS?

render

reactjs