Question

在组件中，每次单击按钮时我都会更改状态。状态是iframe的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库，它与反应不兼容......

Answer 1

只需添加一个键，您可以在需要重新呈现iframe时手动进行变异。由于您希望iframe在视频网址更改时重新呈现，因此只需将其用作关键字：

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

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

1 个答案: