Я хотел бы передать обратный вызов дважды вложенному компоненту, и, хотя я могу эффективно передавать свойства, я не могу понять, как связать обратный вызов с правильным компонентом, чтобы он срабатывал. Моя структура выглядит так:
-OutermostComponent
-FirstNestedComponent
-SecondNestedComponent
-DynamicallyGeneratedListItems
Элементы списка при нажатии должны вызывать обратный вызов, который является методом OutermostComponents "onUserInput", но вместо этого я получаю сообщение "Uncaught Error: Undefined не является функцией". Я подозреваю, что проблема заключается в том, как я передаю SecondNestedComponent внутри первого и передавая ему обратный вызов. Код выглядит примерно так:
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>
);
}
});
Как правильно привязывать обратные вызовы к соответствующим вложенным компонентам?