React Как передать переменную компонента .jsx в другой компонент jsx
У меня есть компонент bar.jsx:
render(){
return(
<div className = "bar">
<button className = "button" onClick = {() => this.setState({view: 1})}>1</button>
<button className = "button" onClick = {() => this.setState({view: 2})}>2</button>
<button className = "button" onClick = {() => this.setState({view: 3})}>3</button>
<button className = "button">Wallet</button>
</div>
И у меня есть еще один компонент, где я хочу получить эти данные:
main.jsx:
render() {
return (
<div className = "App">
<div className = "header"></div>
<bar></bar>
<View></View>
</div>
);
};
Как разобрать значение this.setState({view: 1}) для моего компонента View?
Ответы 1
Для этого вам нужно поднять свое состояние до main.jsx.
Итак, в main.jsx вы создаете состояние {view: 0} или другое значение по умолчанию. Затем вы создаете функцию, которая устанавливает это состояние (вы не можете использовать this.setState в этом случае), это в основном оболочка вокруг this.setState. Затем вы передаете эту функцию своему bar компоненту.
Компонент Bar прикрепляет его к кнопкам вместо () => this.setState({view: 1}), которые у вас есть.
Из основного компонента вы передаете view в качестве реквизита.
Когда пользователь нажимает кнопку, вызывается функция изменения, функция изменения вызывает setState в основном компоненте. Состояние основного компонента изменяется, и он изменяет реквизит для компонента View. Компонент просмотра отображает новые данные.
Подробнее об этом можно прочитать здесь - https://reactjs.org/docs/lifting-state-up.html
вы должны использовать «Поднятие состояния вверх» reactjs.org/docs/lifting-state-up.html