Доступ к дочерним реквизитам компонента за пределами родительского компонента в react

#javascript #reactjs #react-hooks

Вопрос:

У меня есть компонент главной страницы в react, функция рендеринга которого выглядит следующим образом

 const MainPage = () => {
    return (
         <>
              <Component1 />
              <Component2 />
         </>
    )
}

И компонент имеет некоторые входы

 const Component1 = () => {
    const [val1, setVal1] = React.useState("");
    const [val2, setVal2] = React.useState("");
    return (
         <>
              <input type="text" value={val1} onChange={setVal1} />
              <input type="text" value={val2} onChange={setVal2} />
         </>
    )
}

Мой вопрос в том, как получить значения val1 и val2 в компоненте главной страницы?
Заранее спасибо

1. Я чувствую, что вы не можете сделать это таким образом, у вас должны быть значения состояния в компоненте главной страницы, или, если вам нужно использовать эти значения, вы должны использовать контекстный API

2. @Начо Я считал, что этот метод приведет к ненужному сверлению опоры. Поэтому хотел убедиться, что есть какой-нибудь другой лучший метод.

Ответ №1:

используйте Redux или контекстный API в своем проекте React. Кстати, вы можете вызвать функцию, чтобы получить значение дочерних переменных компонента.

Пример Реакции с использованием класса

 class Parent extends Component {
  constructor() {
    this.state = {
      value: ''
    };
  }

  //...

  handleChangeValue = e => this.setState({value: e.target.value});

  //...

  render() {
    return (
      <Child
        value={this.state.value}
        onChangeValue={this.handleChangeValue}
      />
    );
  }
}

class Child extends Component {
  //...

  render() {
    return (
      <input
        type="text"
        value={this.props.value}
        onChange={this.props.onChangeValue}
      />
    );
  }
}

Ответ №2:

Ты не можешь. Реакция основана на Unidirectional Data Flow

Поэтому, чтобы решить вашу проблему, вы должны определить событие, которое будет вызываться от детей.

 const MainPage = () => {
    const [val1, setVal1] = React.useState("");
    const [val2, setVal2] = React.useState("");
    return (
         <>
              <Component1 val1={val1} onChange1={setVal1} val2={val2} onChange2={setVal2} />
              <Component2 />
         </>
    )
}

И Компонент1

 const Component1 = ({val1, onChange1, val2, onChange2}) => {
    return (
         <>
              <input type="text" value={val1} onChange={onChange1} />
              <input type="text" value={val2} onChange={onChange2} />
              />
         </>
    )
}