ReactJs обновляет родительский элемент после ComponentDidMount из дочернего класса

Question

У меня есть родительский класс и дочерний класс. Детский класс будет выполнять начальную операцию загрузки на основе свойства, переданного из родителя. Родительский класс будет обращаться к этим данным, используя статический метод из дочернего элемента. В сущности, я пытаюсь использовать дочерний класс в качестве службы. Приведенный ниже код иллюстрирует сценарий (обратите внимание, что это всего лишь псевдокод).

var Parent = React.createClass({ 

componentDidMount: function() { 
    console.log("parent component was mounted"); 
}, 

    render: function() { 
    return (
     <div> 
     <Child param={this.props.param} /> 
     <p>Child.fetch('key')</p> 
     </div> 
    ); 
    } 
}); 

var Child = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: {} 
     }; 
    }, 

    componentDidMount: function() { 
     console.log("child component was mounted"); 

     $.ajax({ 
      url: "server/api.php", 
     data: { 
     param: param 
     } 
     }).done(function(response) { 
      this.setState({data: response}); 
     }.bind(this)); 
    }, 

    statics: { 
     get: function(key) { 
      console.log('get requested for key: ' + key); 

      var value = null; // default value 

      if(this.data == null) { return value; } 

      //get the value from the data based on the key 

      return value; 
     } 
    },   

    render: function() { 
    return (
     <h2>{this.props.param}</h2> 
    ); 
    } 
}); 

Проблема заключается в том, что функция рендеринга родителя не обновляется после того, как данные были загружены из дочернего класса. Порядок console.log результатов:

1. Родителя рендер: получить испрашивается ключ: ключ
2. родительского компонент был установлен
3. ребенок компонент был установлен
4. => должен инициировать обновление повторно -render parent

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

Answer 1

Вы должны добавить оповещение обратного вызова к своему компоненту Child, который ребенок может активировать, как только данные будут загружены.

На стороне Parent вам просто нужно позвонить this.forceUpdate().

Ожидаемый результат Ожидается, так как жизненный цикл вашего компонента Child отличается от того, который используется для вашего класса Parent.

Возможно, вам потребуется проанализировать возможность перемещения логики нагрузки в Parent и делегировать рендеринг частей ответа каждому ребенку. Это также поможет повысить производительность, поскольку для загрузки всех данных потребуется только один HTTP-запрос.

** Код **

var Parent = React.createClass({ 

componentDidMount: function() { 
    console.log("parent component was mounted"); 
}, 

    render: function() { 
    return (
     <div> 
     <Child param={this.props.param} onDataLoaded={this.forceUpdate} /> 
     <p>Child.fetch('key')</p> 
     </div> 
    ); 
    } 
}); 

var Child = React.createClass({ 
    getInitialState: function() { 
     return { 
      data: {} 
     }; 
    }, 

    componentDidMount: function() { 
     console.log("child component was mounted"); 

     $.ajax({ 
      url: "server/api.php", 
     data: { 
     param: param 
     } 
     }).done(function(response) { 
      if (typeof this.onDataLoaded === 'function') 
      this.onDataLoaded(); 
      this.setState({data: response}); 
     }.bind(this)); 
    }, 

    statics: { 
     get: function(key) { 
      console.log('get requested for key: ' + key); 

      var value = null; // default value 

      if(this.data == null) { return value; } 

      //get the value from the data based on the key 

      return value; 
     } 
    },   

    render: function() { 
    return (
     <h2>{this.props.param}</h2> 
    ); 
    } 
});