Повторная инициализация класса при перенаправлении

componentWillMount () и componentDidMount () будут выполняться только один раз!

(Согласно жизненному циклу компонента React https: // facebook .github.io / реагирует / документы / реагирует - component.html # заместитель компонент - жизненный цикл )

Если вы хотите, чтобы ваш модуль обновлялся каждый раз, когда обновляется модуль внука, вам нужно создать функцию в своем модуле и передать ее как реквизиты дочернему, а также модули внука (в метод визуализации основного модуля)

Эта функция ( updateThisModule ) и ваш метод рендеринга будут выглядеть примерно так:

РЕДАКТИРОВАННАЯ ВЕРСИЯ НИЖЕ: (это просто демонстрация того, как вызвать функцию обратного вызова на родительском компоненте из многоуровневого дочернего компонента, мы можем фактически сделать все что угодно в этом обратном вызове)

import React from 'react';

class Module extends React.Component {

  constructor(props) {
    super(props);
    // ...
  }

  updateThisModule = () => {
    // We can do whatever we want here, either forceUpdate the component
    // or setState, which will also trigger this component to update itself
    // (using setState is more natural, though)
    // *** OPTION 1
    // this.forceUpdate();
    // *** OPTION 2
    // this.setState({
    //   someState: 'someValue',
    //   ..
    // });
    // *** ...
    // ...
  }

  render(){
    // ...
    <ChildModule updateParent={this.updateThisModule} />
    // ...
  }
}

Аналогично, сделайте то же самое в методе рендеринга вашего дочернего модуля (чтобы передать эту функцию еще на 1 уровень в модуль grandchild):

class ChildModule extends React.Component {
  ...
  render(){
    // ...
    <GrandChildModule updateGrandParent={this.props.updateParent} />
    // ...
  }
}

После этого в модуле Grand-Child нам нужен триггер, который вызывает модуль верхнего уровня, который нужно обновить, я предлагаю вам запустить его в функции componentDidUpdate (). Тогда модуль Grand-Child может выглядеть так:

class GrandChildModule extends React.Component {
  constructor(props) {
     super(props);
     // ...
  }

  componentDidUpdate() { 
    // this will be executed every time this grand-child-module updates itself
    // we will then trigger the update function upward to the parent's level first, then the grand-parent's level (which is your main Module)
    this.props.updateGrandParent(); 
  }

  render(){
    // ...
  }
}

Приведенный выше код написан на ES6, если вы пишете свой по-другому, не стесняйтесь размещать его здесь, тогда мы можем вместе изменить ваш код, чтобы он работал!

PS: передача функции как подпорки дочернему компоненту также является основной идеей чистых компонентов React. Однако, если ваша иерархия модулей слишком глубокая (со многими дочерними, внучатыми, правнуковыми и т. Д.), Вы можете рассмотреть возможность использования Flux или Redux