Me gustaría pasar una devolución de llamada a un doble componente anidado, y aunque soy capaz de pasar las propiedades efectivamente, yo no puedo averiguar cómo enlazar la devolución de llamada para el componente correcto para que se activen. Mi estructura se parece a esto:

-OutermostComponent
    -FirstNestedComponent
        -SecondNestedComponent
            -DynamicallyGeneratedListItems

Los Elementos de la Lista al hacer clic debe dar lugar a una devolución de llamada que es el OutermostComponents método «onUserInput», pero en su lugar me sale «Error no capturado: Indefinido no es una función». Sospecho que el problema está en cómo estoy en la representación de la SecondNestedComponent dentro de la primera, y pasando 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 para el adecuado componentes anidados?

InformationsquelleAutor bryant | 2015-03-06

2 Comentarios

  1. 15

    Se pasa this.onUserInput como una propiedad para FirstNestedComponent. Por lo tanto, usted debe tener acceso a él en FirstNestedComponent como this.props.onUserInput.

    var FirstNestedComponent = React.createClass({
        render: function() {
            return (
                <div>
                    <SecondNestedComponent
                        onUserInput={this.props.onUserInput}
                    />
                </div>
            );
        }
    });
    • arn no el concepto de devoluciones de llamada en contra de la unidireccional del flujo de datos de paradigma?
    • No. Si usted lee reaccionar del tutorial, pasando por las devoluciones de llamada de padres a hijos componentes es normal para el curso. facebook.github.io/react/docs/tutorial.html
    • Nah hombre. Reaccionar une cosas «automágicamente» para los métodos pasar como props a los componentes hijos. Técnicamente las devoluciones de llamada de seguir cumpliendo el Reaccionar de ideas™ de unidireccional de flujo de datos porque el contexto es el de los padres (no da niño)
  2. 2

    Para su referencia, por favor revise la aplicació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);

Dejar respuesta

Please enter your comment!
Please enter your name here