React.js如何将回调传递给子组件？

Question

我想将一个回调传递给一个双重嵌套的组件,虽然我能够有效地传递属性,但我无法弄清楚如何将回调绑定到正确的组件以便它被触发.我的结构看起来像这样:

-OutermostComponent
    -FirstNestedComponent
        -SecondNestedComponent
            -DynamicallyGeneratedListItems

单击列表项时应触发回调,即OutermostComponents方法"onUserInput",但我得到"未捕获错误:未定义不是函数".我怀疑问题在于我如何在第一个内部渲染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>
        );
    }
});

如何正确地将回调绑定到适当的嵌套组件？

Answer 1

您将this.onUserInput作为财产传递给FirstNestedComponent.因此,您应该以FirstNestedComponentas身份访问它this.props.onUserInput.

var FirstNestedComponent = React.createClass({
    render: function() {
        return (
            <div>
                <SecondNestedComponent
                    onUserInput={this.props.onUserInput}
                />
            </div>
        );
    }
});