web-dev-qa-db-fra.com

React.js comment passer des rappels aux composants enfants?

Je voudrais passer un rappel à un composant doublement imbriqué, et bien que je puisse passer les propriétés efficacement, je ne peux pas comprendre comment lier le rappel au composant correct afin qu'il soit déclenché. Ma structure ressemble à ceci:

-OutermostComponent
    -FirstNestedComponent
        -SecondNestedComponent
            -DynamicallyGeneratedListItems

Les éléments de liste lorsqu'ils sont cliqués doivent déclencher un rappel qui est la méthode OutermostComponents "onUserInput", mais à la place j'obtiens "Erreur non interceptée: Undefined n'est pas une fonction". Je soupçonne que le problème réside dans la façon dont je rend le SecondNestedComponent à l'intérieur du premier et lui transmets le rappel. Le code ressemble à ceci:

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

Comment lier correctement les rappels aux composants imbriqués appropriés?

javascriptcallbackreactjsreact-jsx
28
bryant

Vous passez this.onUserInput comme propriété de FirstNestedComponent. Par conséquent, vous devez y accéder dans FirstNestedComponent en tant que this.props.onUserInput.

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

Pour votre référence, veuillez vérifier l'implémentation que j'ai créée sur 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);
2
Bulki S Maslom