Блог

Главная - Вопросы по программированию - Реагирует, как передать переменную в component .jsx другому компоненту jsx

Реагирует, как передать переменную в component .jsx другому компоненту jsx

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть панель компонентов.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. вы должны использовать «Подъем состояния вверх». reactjs.org/docs/lifting-state-up.html

Ответ №1:

Чтобы сделать это, вам нужно поднять свое состояние до main.jsx. Итак, в main.jsx вы создаете состояние {view: 0} или какое-либо другое значение по умолчанию. Затем вы создаете функцию, которая устанавливает это состояние (вы не можете использовать this.setState в данном случае), по сути, это оболочка this.setState . Затем вы передаете эту функцию bar своему компоненту.

Компонент Bar прикрепляет его к кнопкам вместо () => this.setState({view: 1}) того, что у вас есть.

Из основного компонента вы передаете view как prop.

Когда пользователь нажимает на кнопку, вызывается функция изменения, функция изменения вызывает setState в главном компоненте. Изменяется состояние основного компонента, и это изменяет реквизит для компонента представления. Компонент просмотра отображает новые данные.

Подробнее об этом можно прочитать здесь — https://reactjs.org/docs/lifting-state-up.html

Метки: ,