Возможно, вы захотите изменить некоторые свойства в состоянии родительского компонента из дочернего компонента. Хотя нет прямого способа добавления ссылок, как вы делаете, когда вы хотите добиться общения между родителями и детьми, Вы все еще можете достичь этого косвенно. Чтобы установить связь между родителями и детьми, вы можете отправить функцию в качестве проповеди для дочернего компонента. Эта функция должна делать все, что нужно в компоненте, например, изменять состояние какого-либо свойства.
Рассмотрим следующий родительский компонент:
class Parent extends React.Component {
constructor(props) {
super(props)
// Bind the this context to the handler function
this.handler = this.handler.bind(this);
// Set some state
this.state = {
messageShown: false
};
}
// This method will be sent to the child component
handler() {
this.setState({
messageShown: true
});
}
// Render the child component and set the action property with the handler as value
render() {
return
}
}Состояние этого родительского компонента имеет messageShown свойство, которое мы хотим изменить по какой-то причине из дочернего компонента. В родительском элементе мы отрендерим дочерний компонент и отправим как свойство (в данном случае action) handler Функция объявлена в родительском.
Дочерний компонент в этом случае очень прост, он нарисует кнопку, действие которой Prop (отправлено в родительском компоненте) будет запущено при нажатии кнопки:
class Child extends React.Component {
render() {
return (
{/* The button will execute the handler function set by the parent component */}
)
}
}Таким образом, вы можете легко выполнять родительские функции из вашего дочернего компонента.
