子孫コンポーネントを親から親に変更して子コンポーネントを更新する

Question

私は子コンポーネントの小道具として状態が渡されるコンポーネントを持っています。親の状態が変更されても、子コンポーネントは再レンダリングされないことに気付きました。

「が内部コンポーネントがレンダリングされる最初の時間は、それがなければなりません：公式に基づい

はshouldComponentUpdate利用するドキュメントを反応させる。{FOO： 『バー』}値小道具などをユーザーがクリックした場合アンカーでは 親コンポーネントの状態が{value：{foo： 'barbar' }に更新され、 が{foo： 'barbar'}を受け取る内部コンポーネントの再レンダリングプロセスをトリガーします小道具の新しい価値

問題は、pオブジェクトが同じオブジェクトへの参照を共有している場合、オブジェクトがonClick関数の2行目 で変更されると、内部コンポーネントの持つpropが変更されます。 したがって、再レンダリングプロセスが開始され、shouldComponentUpdate が呼び出されると、this.props.value.fooは nextProps.value.fooに等しくなります。実際、this.props.valueは と同じオブジェクトを参照するためです。 nextProps.value。私たちは小道具やショート 回路の再レンダリングプロセスの変更を逃してしまうので、

その結果、UIは 「BARBAR」から「バー」から更新されません。」

私はshouldComponentUpdate、どのように私は親から小道具の変化に基づいて再度レンダリングするために子コンポーネントを強制するのでしょうか？

親コンポーネント

を使用できない場合、私は子コンポーネントがブール値に基づいて、再度レンダリングしたいですshowDropzoneに与えられます。

 <Dropzone 
     onDrop={this.onDrop} 
     clearFile = {this.clearFile} 
     showDropzone = {this.state.filePresent}/> 

子コンポーネント子コンポーネントで

export default class Dropzone extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { onDrop } = this.props; 
    const {showDropzone} = this.props; 
    const {clearFile} = this.props; 

    return (
     <div className="file-adder"> 
      <div className="preview"> 
      {{showDropzone}? 
      <Dropzone 
       onDrop={onDrop} 
       ref="dropzone"> 
      </Dropzone>   
      :<button type="button" 
      className="btn btn-primary" 
      onClick={clearFile}> 
      Clear File</button>} 
     </div> 
    </div> 
    ); 
    } 
} 

Answer 1

は、あなたの代わりに "showDropzone" の "showZone" を使用していました。

ありがとうございました