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

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来说是全新的,我不确定这是否是实现这一目标的正确方法!