Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   React / вызов метода другого компонента (https://javascript.ru/forum/library-toolkit-framework/68385-react-vyzov-metoda-drugogo-komponenta.html)

Logger 13.04.2017 12:53

React / вызов метода другого компонента
 
Добрый день.

Для учебных целей использую react -> material ui
Возникла проблема связывания двух компонентов, а именно мне нужно по нажатию на кнопку одного компонента вызвать метод другого компонента.
В бэкэнде обычно для этого используется создание экземпляра класса и обращение к методу экземпляра. В реакте же есть некое монтирование и объяснение межкомпонентного взаимодействия кажется мне несколько путанным.

import Menu from './Menu.js';

class TopAppBar extends Component {
render() {
        return (
            <MuiThemeProvider muiTheme={muiTheme}>
            <div>
                <AppBar
                    title="Title"
                    iconElementRight={this.state.logged ? <Logged /> : <Login />}
                    onLeftIconButtonTouchTap={здесьВызватьМетодИмпортируемогоКлассаMenu}
                />
            </div>
            </MuiThemeProvider>
        );
    }
}


Подскажите, пожалуйста, как вызвать метод импортированного класса (11 строка кода)

Logger 13.04.2017 14:50

Нагуглил немного.
Поскольку вызываемый метод изменяет состояние компонента, можно прибегнуть к
updateData(config) {
  this.setState(config);
}

и
render() {
  return (<div update={this.updateData.bind(this)}></div>)
}

Первое прописываем в нашем основном компоненте, а последнее, как я понял, нужно прописывать в вызываемом компоненте.
Остается только вопрос что передавать в updateData. Пробую передать нужное свойство
onLeftIconButtonTouchTap={this.updateData({open: true})}

Валит ошибками
setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

На SO вроде есть решение последней проблемы, буду пробовать, но интересно, что событие
onLeftIconButtonTouchTap
отрабатывает без клика/тапа огромное количество раз пока не вывалится
Maximum call stack size exceeded

Logger 16.04.2017 09:22

Проблема решилась установкой Vue.js


Часовой пояс GMT +3, время: 17:44.