javascript - form - React.js ¿cómo pasar devoluciones de llamada a componentes secundarios?

react router

Question

Me gustaría pasar una devolución de llamada a un componente doblemente anidado, y aunque puedo pasar las propiedades de manera efectiva, no puedo averiguar cómo vincular la devolución de llamada al componente correcto para que se active. Mi estructura se ve así:

-OutermostComponent
-FirstNestedComponent
-SecondNestedComponent
-DynamicallyGeneratedListItems

Cuando se hace clic en los elementos de la lista se debe activar una devolución de llamada que es el método OutermostComponents "onUserInput", pero en su lugar aparece "Error no detectado: no definido no es una función". Sospecho que el problema está en cómo estoy renderizando el SecondNestedComponent dentro del primero, y pasándole la devolución de llamada. El código se ve algo como esto:

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

¿Cómo puedo enlazar correctamente las devoluciones de llamada a los componentes anidados apropiados?

Answer 1

Para su referencia, consulte la implementación que he creado en 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);

Answer 2

Usted está pasando this.onUserInput como una propiedad a FirstNestedComponent . Por lo tanto, debe acceder a ella en FirstNestedComponent como this.props.onUserInput .

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