React.js, как передавать обратные вызовы дочерним компонентам?

Я хотел бы передать обратный вызов дважды вложенному компоненту, и хотя я могу эффективно передавать свойства, я не могу понять, как привязать обратный вызов к правильному компоненту, чтобы он срабатывал. Моя структура выглядит так:

-OutermostComponent
    -FirstNestedComponent
        -SecondNestedComponent
            -DynamicallyGeneratedListItems

Элементы списка при нажатии должны вызывать обратный вызов, который является методом OutermostComponents «onUserInput», но вместо этого я получаю «Неперехваченная ошибка: Undefined не является функцией». Я подозреваю, что проблема в том, как я визуализирую 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>
        );
    }
});

Как правильно привязать обратные вызовы к соответствующим вложенным компонентам?


reactjs javascript callback react-jsx
person bryant    schedule 06.03.2015    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Вы передаете this.onUserInput в качестве свойства FirstNestedComponent. Поэтому вы должны получить к нему доступ в FirstNestedComponent как this.props.onUserInput.

var FirstNestedComponent = React.createClass({
    render: function() {
        return (
            <div>
                <SecondNestedComponent
                    onUserInput={this.props.onUserInput}
                />
            </div>
        );
    }
});
person Dustin Hayes    schedule 07.03.2015
comment
разве концепция обратных вызовов не противоречит парадигме однонаправленного потока данных? - person SuperUberDuper; 03.07.2015
comment
Нет. Если вы читали учебник по реакции, передача обратных вызовов от родительских к дочерним компонентам является нормой для курса. facebook.github.io/react/docs/tutorial.html - person gregturn; 25.07.2015
comment
Нах человек. React автоматически связывает вещи для методов, которые вы передаете как props дочерним компонентам. Технически обратные вызовы по-прежнему соответствуют идеям React™ об однонаправленном потоке данных, поскольку контекст является родительским (а не дочерним). - person wle8300; 28.10.2015

arrow_upward
2
arrow_downward

Для справки, проверьте реализацию, которую я создал на 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);
person Bulki S Maslom    schedule 24.08.2015