非独生子女修改状态数据反应成分

我有两个，大多是独立的反应类非独生子女修改状态数据反应成分

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(..)传递变量来更新游戏得分，但是当游戏得分改变时，我可以使用什么方式来更新正确的家长用户得分（一次可以有多个用户）

来源

2015-05-29 arkoak

您需要集中您的数据存储并使用事件或其他一些机制来订阅更改。或者，使用回调/事件并将更改（泡泡）从内部传递到组件树之外。 – WiredPrairie

这是一种非反应性的方法。 – arkoak

我的建议都不是非React方法。 Flux是一家集中式商店。另一个反映你接受的答案。 – WiredPrairie

您可以从用户通过道具传递一个处理函数游戏：

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); 
    } 
}

来源

2015-05-29 12:37:06 Viacheslav

我做了另外一个黑客在等待，它起的答案和有趣的分享对于那些想成为谁能够调用所有的公共职能为根本水平。

假设你有Croot类

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

渲染分配给一个变量的结果。

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

使用，在任何子节点变量调用Croot
```
rootComponent.anyPublicFunction(val); 
```

来源

2015-05-29 14:02:24 arkoak

的任何公共职能在你们这样的情况下两个组件不共享共同的父，可以合理地被用于存储状态的变化，那么你应该使用商店。直到最近我还不熟悉这个概念，但对这些东西比我知道得多的人推荐使用Reflux，因为它是Flux体系结构的简化版本。它只是一个存储和操作数据的地方，而不依赖于任何一个组件，但可根据需要访问这些组件。

编辑：通量和回流似乎已被优秀Redux取代。

来源

2015-05-30 00:34:22

非独生子女修改状态数据反应成分

回答

相关问题