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 строка кода) |
Нагуглил немного.
Поскольку вызываемый метод изменяет состояние компонента, можно прибегнуть к
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 |
Проблема решилась установкой Vue.js
|
| Часовой пояс GMT +3, время: 00:56. |