Мы можем изменить переменную состояния дочернего компонента из родительского компонента, используя концепцию ref.
- сначала создайте родительский компонент
класс Parrent расширяет React.Component {
конструктор (реквизит) {
супер (реквизит);
}
оказывать() {
возвращение (
‹див›
‹/дел›
);
}}
2. Теперь создайте дочерний компонент
класс Child расширяет React.Component {
состояние = {
Название: Бэтмен
};
оказывать() {
вернуть ‹div›{this.state.name}‹/div›;
}}
3. После создания дочерней композиции импортируйте дочерний компонент в родительский компонент. после этого код нашего родительского компонента:
класс Parrent расширяет React.Component {
конструктор (реквизит) {
супер (реквизит);
}
оказывать() {
возвращение (
‹div›
‹Ребенок /›
‹/дел›
);
}}
4. Следующий шаг — создать ссылку в родительском компоненте для дочернего компонента.
класс Parrent расширяет React.Component {
конструктор (реквизит) {
super(props);
this.childRef = React.createRef();
}
оказывать() {
возвращение (
‹div›
‹Дочерняя ссылка={this.childRef} /›
‹/дел›
);
}}
5. Теперь создайте кнопку в родительском компоненте. Нажав на эту кнопку, мы можем изменить состояние дочернего компонента из родительского компонента, используя ссылку реакции.
класс Parrent расширяет React.Component {
конструктор (реквизит) {
super(props);
this.childRef = React.createRef();
}
handleClick = () =› {
this.childRef.current.setState({ name: Whatever you want})
}
оказывать() {
возвращение (
‹div›
‹Child ref={this.childRef} /›
‹button onClick={this.handleClick}›Показать настоящее имя‹/button›
‹/дел›
);
}}
