React re-render компонент, когда другой компонент изменен

Question

У меня есть два исходных файла React, A и B. A, в методе визуализации, вызывает B так:

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

Так B визуализируется, если выбрана Classification компонента A.

В B, у меня есть следующий метод, который вычисляет некоторые значения на основе Classification:-х

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

В настоящее время, я называю этот метод из ComponentWillMount метода Б.

Я хочу, чтобы этот метод выполнялся каждый раз, когда изменяется классификация A. Однако на данный момент он вызывается только тогда, когда сначала выбирается классификация A.

Как я могу изменить метод getSingleChoiceAttributes каждый раз, когда A в Classification (в лице this.state.classificationIndex) изменился?

Answer 1

Использование componentWillReceiveProps.

void componentWillReceiveProps(
    object nextProps 
) 

Вызывается, когда компонент получает новый реквизит. Этот метод не является , вызываемым для первоначального рендера.

Используйте это как возможность реагировать на переход prop до render() вызывается путем обновления состояния, используя this.setState(). Доступ к старым реквизитам можно получить через this.props. Вызов this.setState() в этой функции не вызовет дополнительный рендер.