Question

我正在使用与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委托给父组件（容器）还是在项目组件中实现它？为什么？

Answer 1

取决于点击处理程序中您需要的内容。您是否需要在单击处理程序中访问容器状态或成员变量或方法？如果是，则通过所有方法将处理程序定义为容器的方法，并将其作为属性传递给项目。如果没有，那么处理程序的逻辑位置就是项目本身。

如果你需要访问两者，例如改变两个组件的状态，那么使用两个：实现两个处理程序并让onClick处理程序调用从父项传递的属性作为属性。

应该将组件委托onChange事件委托给父母吗？

1 个答案: