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

我想将回调传递给双嵌套组件，虽然我能够有效地传递属性，但我不知道如何将回调绑定到正确的组件以便触发它。我的结构如下所示：

-OutermostComponent
    -FirstNestedComponent
        -SecondNestedComponent
            -DynamicallyGeneratedListItems

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>
        );
    }
});

单击列表项时应触发回调，这是最外层的组件方法“onUserInput”，但我得到的是“未捕获错误：未定义的不是函数”。我怀疑问题在于如何在第一个组件中呈现SecondNestedComponent，并将回调传递给它。代码如下所示：

-OutermostComponent
    -FirstNestedComponent
        -SecondNestedComponent
            -DynamicallyGeneratedListItems

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>
        );
    }
});

var OutermostComponent=React.createClass({
onUserInput://我的函数，
render:function（）{
返回(
//其他组成部分
);
}
});
var FirstNestedComponent=React.createClass({
render:function（）{
返回(
//其他组成部分
);
}
});
var SecondNestedComponent=React.createClass({
render:function（）{
var项目=[]；
this.props.someprop.forEach（函数（myprop））{
items.push（）；}，this）；
返回(

{items}

);
}
});

---

如何将回调正确绑定到相应的嵌套组件？

您正在将

this.onUserInput

作为属性传递到

FirstNestedComponent

。因此，您应该在

FirstNestedComponent

中以

this.props.onUserInput

的形式访问它

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

var FirstNestedComponent=React.createClass({
render:function（）{
返回(
);
}
});

请检查我在上创建的实现，以供参考

函数ListenersService（）{
var侦听器={}；
this.addListener=函数（回调）{
变量id；
if（回调类型==='function'）{
id=Math.random（）.toString（36）.slice（2）；
侦听器[id]=回调；
}
返回id；
}
this.removeListener=函数（id）{
if（侦听器[id]）{
删除侦听器[id]；
返回true；
}
返回false；
}
this.notifyListeners=函数（数据）{
for（侦听器中的变量id）{
if（listeners.hasOwnProperty（id））{
侦听器[id]（数据）；
}
}
}
}
函数数据服务（ListenerService）{
变量数据={value:1}；
var self=这个；
var listenersService=new listenersService（）；
this.addListener=listenersService.addListener；
this.removeListener=listenersService.removeListener；
this.getData=函数（）{
返回数据；
}
setInterval（函数（）{
Data.value++；
ListenerService.notifyListeners（数据）；
}, 1000);
}
var dataSevice=新的数据服务（ListenerService）；
var World=React.createClass({
render:function（）{
返回{this.props.data.value}；
}
});
var Hello=React.createClass({
getInitialState:函数（）{
返回{
数据：this.props.dataService.getData（）
};
},
componentDidMount:function（）{
this.props.dataService.addListener（this.updateHandler）
},
updateHandler:函数（数据）{
这是我的国家({
数据：数据
});
},
render:function（）{
返回(
价值：
);
}
});
React.renderComponent（，document.body）；
< /代码>不是单向数据流范例的回调概念吗？不。如果你阅读Read的教程，从父到子组件的回调是该课程的标准。不，伙计。React“自动”为作为
道具传递给子组件的方法绑定内容。从技术上讲，回调仍然符合React的想法™ 由于上下文是父对象（而不是da子对象），因此单向数据流的