反应组件是否应该将 onChange 事件委托给父级?

Should react component delegate onChange events to parent?

我正在使用 React with Flux 架构。我有一个关于最佳实践的问题。 我们有两个组件:容器和项目:

var Contaner = React.createClass({
    getInitialState: function () {
        return {
            items: [ 'hello', 'world' ]
        }
    },
    onClick: function () {
        console.log('clicked!');
    },
    render: function () {
        return 
            <div>
                {this.state.items.map(function (item) {
                    return <Item data={item} onClick={this.onClick} />
                })}
            </div>;
    }
});

var Item = React.createClass({
    getInitialState: function () {
    render: function () {
        return 
            <div>
                <button onClick={this.props.onClick}>{this.props.data}</button>
            </div>
    }
});

所以,问题是:我应该将 onClick 委托给父组件(容器)还是在项目组件中实现它,为什么?

取决于您在点击处理程序中需要什么。您是否需要在点击处理程序中访问容器状态或成员变量或方法?如果是,那么一定要将处理程序定义为容器的方法,并将其作为 属性 传递给项目。如果不是,那么处理程序的逻辑位置就是项目本身。

如果您需要同时访问两者,例如更改两个组件的状态,则同时使用两者:实现两个处理程序并让项目 onClick 处理程序调用从父级传递的作为 属性 的处理程序。