通過修改React中的父項更新子組件

我有一個組件，其狀態作爲prop傳遞給子組件。我注意到，即使Parent的狀態發生了變化，子組件也不會被重新渲染。通過修改React中的父項更新子組件

基於官方陣營文檔用於利用shouldComponentUpdate：

「第一次內部部件獲取呈現，就會產生。{FOO： ‘酒吧’}作爲值丙如果用戶單擊在錨定，所述父組件的狀態將得到更新爲{值：{FOO：「BARBAR」 }}，觸發內部部件，其將獲得{foo的：「BARBAR」}的再繪製處理作爲爲支柱的新價值。

的問題是，由於p arent和inner組件共享一個對同一個對象的引用，當對象在onClick函數的第2行上發生變化時，內部組件的prop將會改變。因此，當重新呈現過程開始時，並且應調用ComponentComponentUpdate 時，this.props.value.foo將等於 nextProps.value.foo，因爲實際上，this.props.value引用了與相同的對象nextProps.value。

因此，既然我們會想念在支架和短電路重新渲染過程中的變化，用戶界面將不會從「酒吧」爲「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> 
    ); 
    } 
}

來源

2016-08-04 lost9123193

確定命名正確嗎？子組件稱爲Dropzone，但其渲染函數也呈現子節點。 – wintvelt

在子組件，你曾用「showZone」而不是「showDropzone」。

謝謝

來源

2016-08-04 06:00:24 Rakesh

謝謝！這是我的一個小錯誤，我嘗試了它，但它仍然不起作用 – lost9123193

是否要在按鈕上更新該狀態單擊「clearFile」？ – Rakesh

狀態showZone在父組件中更新爲true和false。我可以更新父母狀態。我的問題是在子組件中，只有組件顯示。即使我有{{showDropzone}），清除文件按鈕也不會顯示？檢查showDropzone是真是假 – lost9123193

通過修改React中的父項更新子組件

回答

相關問題