Изменить данные о состоянии неиспользования ребенка реагировать компонент

Question

У меня есть два, в основном независимый реагируют классы

var User = React.createClass({ 
    .... 
    updateGameScore: function(){ this.game1.score = .... } 
    render: function(){ return (<div>{this.state.totalScore}</div>); 
}); 


var Game = React.createClass({ 
    .... 
    updateUserScore:function(){ how to access/modify parent here??? }, 
    render: function(){ return (<div>{this.state.score}</div>); 
}); 

Мне нужно, чтобы иметь возможность обновлять пользовательский totalScore при изменении счета игры и наоборот на основе некоторой формулы (не имеет значения Вот). Компоненты таковы, что игра вложена в пользователя как дочерний компонент, но не может быть наоборот. Изменение в рейтинге пользователя может обновить счет игры, передав переменную, используя this.state(..), однако, когда изменяется оценка игры, каким образом я могу использовать для обновления правильной учетной записи пользователя (может быть более одного пользователя за раз)

Answer 1

Вы можете передать функцию обработчика от пользователя к игре с помощью реквизита:

var User = React.createClass({ 
    ... 
    handleScoreChange: function(newScore) { 
     this.setState({totalScore: newScore}); 
    } 

    render: function() { 
     return (
      <Game handleScoreChange={this.handleScoreChange.bind(this)} /> 
     ) 
    } 
}); 

var Game = React.createClass({ 
    ... 
    updateUserScore: function() { 
     this.props.handleScoreChange(this.state.score); 
    } 
} 

Answer 2

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

1. Предполагая, что вы есть Крут класс

   var Croot = React.createClass({ 
       ... 
       anyPublicFunction(val){ 
        ... 
       } 
   }); 
   

2. присвоить результат визуализации переменной.

   var rootComponent = React.render(
       <Croot >..users & games here ...</Croot>, 
       document.getElementById('lobbyArea') 
   ); 
   

3. Использование этой переменной в любом дочернего узла для вызова любой общественной функции Крут

   rootComponent.anyPublicFunction(val); 
   

Answer 3

В такой ситуации, как у вас, где два компонента не разделяют общего предка, который может разумно быть используется для хранения изменений в состоянии, тогда вы должны использовать магазин. Я не знаком с этой концепцией до недавнего времени, но люди, которые знают гораздо больше, чем я об этом, рекомендуют использовать Reflux, так как это упрощенная версия упрощенной версии архитектуры Flux. Это просто место для хранения и обработки данных, не зависящих от какого-либо одного компонента, но доступного для этих компонентов по мере необходимости.

EDIT: Как Flux, так и Reflux, кажется, были заменены отличным Redux.