React.js如何将回调传递给子组件？
React.js如何将回调传递给子组件？
提问于 2015-03-07 07:06:16
我希望将回调传递给一个双重嵌套的组件，虽然我能够有效地传递属性，但我不知道如何将该回调绑定到正确的组件，以便触发它。我的结构看起来像这样：
-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>
);
}
});如何正确地将回调绑定到适当的嵌套组件？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-07 08:14:58
您正在将this.onUserInput作为属性传递给FirstNestedComponent。因此，您应该以this.props.onUserInput的身份在FirstNestedComponent中访问它。
var FirstNestedComponent = React.createClass({
render: function() {
return (
<div>
<SecondNestedComponent
onUserInput={this.props.onUserInput}
/>
</div>
);
}
});Stack Overflow用户
发布于 2015-08-24 15:42:57
作为参考，请查看我在jsfiddle.net/kb3gN/12007创建的实现
function ListenersService(){
var listeners = {};
this.addListener = function(callback){
var id;
if(typeof callback === 'function'){
id = Math.random().toString(36).slice(2);
listeners[id] = callback;
}
return id;
}
this.removeListener = function( id){
if(listeners[id]){
delete listeners[id];
return true;
}
return false;
}
this.notifyListeners = function(data){
for (var id in listeners) {
if(listeners.hasOwnProperty(id)){
listeners[id](data);
}
}
}
}
function DataService(ListenersService){
var Data = { value: 1 };
var self = this;
var listenersService = new ListenersService();
this.addListener = listenersService.addListener;
this.removeListener = listenersService.removeListener;
this.getData = function(){
return Data;
}
setInterval(function(){
Data.value++;
listenersService.notifyListeners(Data);
}, 1000);
}
var dataSevice = new DataService(ListenersService);
var World = React.createClass({
render: function() {
return <strong>{this.props.data.value}</strong>;
}
});
var Hello = React.createClass({
getInitialState: function() {
return {
data: this.props.dataService.getData()
};
},
componentDidMount: function() {
this.props.dataService.addListener(this.updateHandler)
},
updateHandler: function(data) {
this.setState({
data: data
});
},
render: function() {
return (
<div>
Value: <World data={this.state.data} />
</div>
);
}
});
React.renderComponent(<Hello dataService={dataSevice} />, document.body);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28909171
复制相关文章
相似问题
腾讯云开发者
