maksipes
@maksipes

Как устроить взаимодействие React компонентов в существующем проекте?

Для начала приведу очень утрированный пример, того что уже есть, чтобы было легче понять, что я хочу получить.

Первый компонент делает ввод чисел:
class FirstСomponent extends React.Component {
  render() {
    return <input type="number" onChange={this.props.onChange} />;
  }
}


Второй их вывод:
class SecondСomponent extends React.Component {
  render() {
    return <div>{this.props.data.val}</div>;
  }
}


И есть компонент оболочка, который имеет state, обрабатывает событие, передает данные в нижестоящие компоненты, т.е. обеспечивает логику работы:
class Main extends React.Component {
  state = { val: 0 };

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

  render() {
    return (
      <div>
        <FirstСomponent onChange={this.onChange} />
        <SecondСomponent data={this.state} />
      </div>
    );
  }
}


И все это вместе выводится в одно место в документе:
const rootElement = document.getElementById("root");
ReactDOM.render(<Main />, rootElement);


Насколько я понимаю это стандартная схема взаимодействия компонентов. Это то что у меня уже есть и работает.

Теперь мне надо встроить аналогичный функционал в уже действующий сайт, причем первый компонент должен быть (условно) в хедере, а второй в футере, а не где-то рядом в одном месте, так что я их могу встроить как в примере выше.

Т.е. мне нужно вставить в существующую страницу по отдельности FirstСomponent и SecondСomponent и при этом как-то сделать их совместную работу.

Как я не знаю.
  • Вопрос задан
  • 165 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
maksipes
@maksipes Автор вопроса
Если кому-то вдруг тоже самое понадобится, вот хороший пример (не мой)

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

    return (
      <React.Fragment>
          {ReactDOM.createPortal(
            <HeaderContent dateStr={dateStr} />,
            document.getElementById("header")
          )}
          <div>This is the main content</div>
          {ReactDOM.createPortal(
            <Footer text="this is cool footer text" />,
            document.getElementById("footer")
          )}
      </React.Fragment>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("main"));
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы