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

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

我在等待答案时又进行了一次黑客攻击，对于那些希望能够在根级别调用所有 public 函数的人来说，这也很有效并且很有趣。

假设你有 Croot class

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

将渲染结果赋给一个变量。

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

在任何子节点中使用该变量来调用 Croot
的任何 public 函数
```
rootComponent.anyPublicFunction(val);
```

Answer 3

在像您这样的情况下，两个组件不共享可以明智地用于存储状态更改的公共父级，那么您应该使用商店。直到最近我才熟悉这个概念，但是比我更了解这些事情的人建议使用 Reflux as it is a streamlined/simplified version of the Flux 架构。它只是一个存储和操作数据的地方，独立于任何一个组件，但这些组件可以根据需要访问。

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

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

Modify state data for non-child react component

javascript

reactjs