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

您可以通过道具将处理函数从User传递给Game：

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

在像你这样的情况下，两个组件不共享一个可以合理地用于存储状态变化的公共父级，那么你应该使用一个商店。直到最近我才对这个概念不熟悉，但是对这些事情比我更了解的人建议使用Reflux，因为它是Flux架构的简化/简化版本。它只是一个存储和操作数据的地方，独立于任何一个组件，但可以根据需要访问这些组件。

编辑：Flux和Reflux似乎都被优秀的Redux所取代。

Answer 3

我在等待答案时又做了一次黑客攻击，这对于那些希望能够在根级别调用所有公共功能的人来说也很有用。

假设您有Croot类
```
module.constant
```
将渲染的结果分配给变量。
```
module.value
```

在任何子节点中使用该变量来调用Croot的任何公共函数

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

修改非子反应组件的状态数据

3 个答案: