Мы создадим простое приложение React, которое будет отображать настоящее имя супергероя при нажатии кнопки.
Давайте начнем.
Сначала мы создадим компонент Superhero с атрибутом name в состоянии. Этот компонент сначала отобразит это name.
Теперь давайте создадим функцию changeName() в компоненте Superhero. Эта функция изменит имя в состоянии на настоящее имя супергероя.
Теперь у нас есть компонент Superhero, который показывает имя супергероя, и функция, которая обновляет имя до его настоящего имени.
Полный компонент Superhero будет выглядеть так:
Теперь давайте создадим компонент App, который будет отображать этот компонент Superhero и кнопку. Когда мы нажимаем кнопку, отображается настоящее имя супергероя.
Мы добавили функцию handleClick(), которая будет вызываться, когда пользователь нажимает кнопку. Нам нужно найти способ обновить состояние дочернего компонента, то есть компонента Superhero.
Мы создали функцию changeName() в компоненте Superhero. Эта функция покажет настоящее имя супергероя. Если мы сможем вызвать эту функцию из компонента App, наша работа сделана. Итак, мы назовем эту функцию.
Здесь нам на помощь приходят ссылки.
Давайте создадим ссылку на компонент Superhero в компоненте App. Вот код для этого.
Здесь мы создали ссылку с использованием метода React.createRef() и прикрепили ссылку к компоненту Superhero с помощью атрибута ref.
Теперь мы сможем ссылаться на узел Superhero, используя this.superheroElement.current. Мы также сможем вызывать функцию changeName() в компоненте Superhero, используя this.superheroElement.current.changeName().
Давайте обновим нашу handleClick() функцию в нашем App компоненте, чтобы она вызывала changeName() функцию.
Наша функция handleClick() будет выглядеть так.
Вы можете проверить полный код в песочнице ниже.
Теперь мы узнали, как обновить состояние дочернего компонента из родительского компонента 🎉. Я надеюсь, что это было полезно.
