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, время: 22:27. |