反应组件是否应该将 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 处理程序调用从父级传递的作为 属性 的处理程序。
我正在使用 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 处理程序调用从父级传递的作为 属性 的处理程序。