更改另一個組件時反應重新渲染組件

Question

我有兩個React源文件A和B A在其render方法中這樣調用B ：

{this.state.classificationSelected
      ?
      <div>
      <B classification={this.props.categories[this.state.categoryIndex].classes[this.state.classificationIndex]} ref="B"/>
      </div>
      :
      null
    }

因此，如果選擇了A的Classification組件，則渲染B

在B ，我有以下基於A的Classification來計算一些值的方法：

getSingleChoiceAttributes: function() {
    var singleChoiceAttributes = [];
    for(let attribute of this.props.classification.attributes){
        if(attribute.attributeType == 'SingleChoice') {
            singleChoiceAttributes.push(attribute);
        }
    }
    return singleChoiceAttributes;
},

當前，我從B的ComponentWillMount方法調用此方法。

我希望每次更改A的分類時都可以執行此方法。 但是，目前僅在第一次選擇A的類別時才調用它。

每當A的Classification （由this.state.classificationIndex表示）改變時，如何更改getSingleChoiceAttributes方法？

Answer 1

使用componentWillReceiveProps 。

void componentWillReceiveProps(
  object nextProps
)

組件接收新道具時調用。 初始渲染不調用此方法。

以此為契機，通過使用this.setState（）更新狀態來調用render（）之前對prop過渡做出反應。 可以通過this.props訪問舊的道具。 在此函數中調用this.setState（）不會觸發其他渲染。