javascript - 将其中一个孩子的变化传达给父母的父母

Question

这就是我的“层次结构”的样子：

Game
    Table
        TableRow
            Cell

单击单元格时，我想从 Game 运行一个方法。React 的设计与我习惯的有点不同，我无法将 Cell 中的更改传达回 Game。最好的方法是什么？

仅供参考，我正在尝试在 React.js中创建Ultimate TTT 。

Answer 1

您可以做的是将指向 Game 函数的指针作为属性传递给 Child 组件。例如：

var Game = React.createClass({
    gameFunction: function() {
        alert('gameFunction()');
    },
    render: function() {
        return (
            <div className="game">
                <h1>Game</h1>
                <Table gameFunction={this.gameFunction} />
            </div>
        );
    }
});

var Table = React.createClass({
    render: function() {
        return (
            <div className="table">
                <table>
                    <tr>
                        <td onClick={this.props.gameFunction}>Cell</td>
                    </tr>
                </table>
            </div>
        );
    }
});

话虽如此，我是 React 的新手，我不确定这是否是完成此任务的正确方法！