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; 

EDIT：問題が反応と互換性がありませんでした、私が使っていたのIFrameライブラリー、とあった...

Answer 1

ちょうどあなたがにIFRAMEをいつでも手動で変異するキーを追加再レンダリングされる。 iframeで動画URLの変更を再描画したいので、キーとしてそのまま使用してください：

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