我有一个react.js组件,它有一个带有onChange事件处理程序的select。我在需要向onChange添加特定行为的父组件中重用该组件,但前提是满足特定条件;如果没有,则应应用子组件的行为。情况伪代码如下所示:
var ParentComponent = React.createClass({
handleChange: function(event) {
if (condition_on_event) {
do_something_and_stop_the_handler();
} else {
//execute_child_handler
}
},
render: function() {
...
<ChildComponent />
}
});
var ChildComponent = React.createClass({
handleChange: function(event) {
//child handler code
}
},
render: function() {
...
<select onChange={this.handleChange} />
}
});
其思想是,父级将根据子级中select的值执行某些内容。但只有一个值,其余值将正常执行子处理程序。
在这种情况下,如果我将父处理程序作为道具传递,它将覆盖子处理程序,因此我需要在父处理程序上复制代码。
我想到的一个解决方案是,我可以将处理程序作为一个具有不同名称的道具来传递,以便在子处理程序中使用它,但这似乎是一个非常糟糕的解决方案,因为在隔离使用时,我会向子处理程序添加一个不必要的道具。
有什么建议吗?
由于父组件似乎已经知道子组件在做什么(即,它知道子组件中有一些标准的事件处理逻辑),那么在子组件和父组件之间建立一个更强的契约怎么样?
父级可以将回调传递给在更改时调用的子级。如果该回调返回false
以外的任何内容,则子级将继续其常规事件处理,否则将停止。
示例:
var ParentComponent = React.createClass({
handleChange: function(event) {
if (!condition_on_event) {
return false;
}
do_something_and_stop_the_handler();
},
render: function() {
...
<ChildComponent onChange={this.handleChange}/>
}
});
var ChildComponent = React.createClass({
handleChange: function(event) {
if (this.props.onChange && this.props.onChange(event) !== false) {
//child handler code
}
},
render: function() {
...
<select onChange={this.handleChange} />
}
});