Как связать компоненты?

Question

[Li_Von]

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

Comments

[Роман Александрович]

я в такие моменты понимаю что пора подключать редукс из-за таво что эта проблема решается на раз два с его помощью

Answer 1

[Антон Спирин]

Такие задачи легко решаются через родителя:

class Parent extends Component {
  state = {
    text: 'some text',
  };

  handleClick = () => {
    this.setState({ text: 'some other text'});
  };

  render() {
    const { text } = this.state;

    return (
      <Wrapper>
        <Button onClick={this.handleClick} />
        <Text>{text}</Text>
      </Wrapper>
    );
  }
}

В компонентной структуре , как и в любой другой древовидной, физически невозможно расположить два компонента, чтобы они не находились в одном общем родителе. Это факт.
Если вы не используете redux и задача носит частный характер, то передача колбека через родителя и даже через несколько компонентов, может быть простым и эффективным решением.
Другое дело, что в более менее сложном react приложении хорошо использовать redux или аналоги.

Answer 2

[y0u]

Redux