我想要将一个回调函数传递给一个双重嵌套的组件,虽然我能够有效地传递属性,但我无法确定如何将回调函数绑定到正确的组件,以便它被触发。我的结构看起来像这样:
-OutermostComponent
-FirstNestedComponent
-SecondNestedComponent
-DynamicallyGeneratedListItems
当单击列表项时,应触发外层组件方法“onUserInput”的回调,但实际上我得到的是“未捕获错误:未定义函数”。我怀疑问题出在我如何在第一个嵌套组件中呈现第二个嵌套组件,并将其传递给回调上。代码看起来像这样:
var OutermostComponent = React.createClass({
onUserInput: //my function,
render: function() {
return (
<div>
//other components
<FirstNestedComponent
onUserInput={this.onUserInput}
/>
</div>
);
}
});
var FirstNestedComponent = React.createClass({
render: function() {
return (
<div>
//other components
<SecondNestedComponent
onUserInput={this.onUserInput}
/>
</div>
);
}
});
var SecondNestedComponent = React.createClass({
render: function() {
var items = [];
this.props.someprop.forEach(function(myprop) {
items.push(<DynamicallyGeneratedListItems myprop={myprop} onUserInput={this.props.onUserInput}/>);}, this);
return (
<ul>
{items}
</ul>
);
}
});
我应该如何正确地将回调函数绑定到适当的嵌套组件上?