В этом случае вам может помочь Компонент высшего порядка , или сокращенно HO C. Вы можете увидеть HO C как родительский компонент, где вы можете хранить координаты. Дочерние компоненты (в вашем случае Mobile и Laptop) могут затем устанавливать и получать доступ к данным в HO C, позволяя дочерним компонентам отображать координаты.
Давайте проясним это более подробно. Сначала вам нужно создать компонент HO C, который сохраняет координаты в своем состоянии. HO C должен иметь установщик, который необходимо передать дочерним компонентам как свойство. Значение координат также должно быть передано дочерним компонентам, что мы можем сделать с помощью оператора распространения .
const withCoordinates = (WrappedComponent) => {
class WithCoordinates extends Component {
constructor(props) {
super(props);
this.state = {
coordinates: [],
};
}
setCoordinates = (event) => {
const { name, value } = e.target;
this.setState({ [name]: value });
}
render() {
return (
<WrappedComponent
setCoordinates={(coordinates) => this.setCoordinates(coordinates)}
{...this.state}
/>
);
}
}
return WithCoordinates;
}
export default withCoordinates;
Затем нам нужно подключить дочерние компоненты, чтобы он мог доступ к значениям, определенным в HO C. Поскольку мы передали значение coordinates и метод setCoordinates через свойства, мы можем получить к ним доступ в дочернем компоненте.
class Laptop extends Component {
render() {
const { setCoordinates, coordinates } = this.props;
return (
<>
<input name='coordinates' value={coordinates || ''} onChange={(e) => setCoordinates(e)} />
<p>The coordinates are {coordinates}</p>
</>
);
}
}
export default WithCoordinates(Laptop);
Обратите внимание, что дочерний компонент экспортируется вместе с компонентом WithCoordinates в оболочке вокруг него. Это дает возможность дочернему компоненту получить доступ к значениям в HO C. Имя поля ввода в дочернем компоненте соответствует значению состояния, которое устанавливается в HO C.
Не забудьте проверить свойства с помощью библиотеки Proptypes .