javascript - 将其中一个 child 的变化传达给 parent 的 parent

Question

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

Game
    Table
        TableRow
            Cell

单击单元格时，我想从 Game 运行一个方法。 React 的设计与我习惯的有点不同，我只是无法集中精力将 Cell 中的更改反馈给 Game。执行此操作的最佳方法是什么？

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

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 的新手，不确定这是否是正确完成此任务的方法!