Для начала приведу очень утрированный пример, того что уже есть, чтобы было легче понять, что я хочу получить.
Первый компонент делает ввод чисел:
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 и при этом как-то сделать их совместную работу.
Как я не знаю.
