Как вызвать метод дочернего компонента из родительского компонента с помощью useImperativeHandle
2 года назад·3 мин. на чтение
Быстрый старт с useImperativeHandle
В этой статье будет показано, как вызвать метод дочернего компонента с помощью ссылки. Чтобы решить эту проблему, мы будем использовать хуки
Хук
Теперь давайте сосредоточимся на нашей задаче. Мы хотим вызвать метод (
На этом этапе мы можем создать ссылку в родительском компоненте с помощью хука
В родительский компонент нам нужно импортировать этот
useRef
и useImperativeHandle
.
Дочерний компонент
Начнем с простого дочернего компонента, в котором содержится кнопка. Нажатие на кнопку вызывает внутренний методdoSomething
.
// Child.jsx function Child(props, ref) { const doSomething = () => { console.log("do something"); }; return ( <div> <h1>Child Component</h1> <button onClick={doSomething}>Run</button> </div> ); } export default Child;
Родительский компонент
Далее рассмотрим родительский компонент. В нем используется дочерний компонент, описанный выше. Обратите внимание, что в родительском компоненте есть собственная кнопка сохранения.// App.jsx import Child from "./Child"; function App() { const save = () => {}; return ( <div> <Child /> <button onClick={save}>Save</button> </div> ); } export default App;
Хук useImperativeHandle
Теперь давайте сосредоточимся на нашей задаче. Мы хотим вызвать метод (doSomething
) дочернего компонента при нажатии кнопки (Save
) из родительского компонента.
Чтобы вызвать метод из дочернего компонента, нам нужно сначала выставить его наружу.
useImperativeHandle
определяет значение объекта, которое предоставляется родительскому компоненту при использовании ref
. Добавляя наш метод к этому объекту, мы делаем его доступным в родительских компонентах.
// Child.jsx import { useImperativeHandle } from "react"; function Child(props, ref) { const doSomething = () => { console.log("do something"); }; useImperativeHandle(ref, () => ({ doSomething })); return ( <div> <h1>Child Component</h1> <button onClick={doSomething}>Run</button> </div> ); } export default Child;
useImperativeHandle
следует использовать с forwardRef
.
forwardRef
позволяет родительскому компоненту передавать ссылки своим дочерним элементам. Чтобы прикрепить функции или поля к этой ссылке (к рефу), используется хук useImperativeHandle
.
// Child.jsx import { forwardRef, useImperativeHandle } from "react"; function Child(props, ref) { const doSomething = () => { console.log("do something"); }; useImperativeHandle(ref, () => ({ doSomething })); return ( <div> <h1>Child Component</h1> <button onClick={doSomething}>Run</button> </div> ); } export default forwardRef(Child); // Child обернут в forwardRef
useRef
и передать ее дочернему компоненту. Получив эту ссылку, мы можем вызвать метод doSomething
дочернего компонента.
// App.jsx import { useRef } from "react"; import Child from "./Child"; function App() { const childRef = useRef(null); const save = () => { if (childRef.current) { childRef.current.doSomething(); } }; return ( <div> <Child ref={childRef} /> <button onClick={save}>Save</button> </div> ); } export default App;
Добавим TypeScript
Далее посмотрим, какие изменения нужно сделать, чтобы вызвать тот же дочерний метод из родительского компонента при использовании TypeScript. Во-первых, нам нужно определить новый интерфейс, содержащий метод, который будет представлен.Затем новый тип (export interface RefType { doSomething: () => void; }
RefType
) используется при получении ссылки в дочернем компоненте.
Ниже приведен полный код дочернего компонента.function Child(props: PropsType, ref: Ref<RefType>)
// Child.jsx import { forwardRef, useImperativeHandle, Ref } from "react"; export interface PropsType {} export interface RefType { doSomething: () => void; } function Child(props: PropsType, ref: Ref<RefType>) { const doSomething = () => { console.log("do something"); }; useImperativeHandle(ref, () => ({ doSomething })); return ( <div> <h1>Child Component</h1> <button onClick={doSomething}>Run</button> </div> ); } export default forwardRef(Child);
RefType
, содержащий все публичные дочерние методы, и использовать его при создании ref
.
Полный код родительского компонента.// App.jsx import Child, { RefType } from "./Child"; //... const childRef = useRef<RefType>(null);
import { useRef } from "react"; import Child, { RefType } from "./Child"; function App() { const childRef = useRef<RefType>(null); const save = () => { if (childRef.current) { childRef.current.doSomething(); } }; return ( <div> <Child ref={childRef} /> <button onClick={save}>Save</button> </div> ); } export default App;
Полное руководство по React Router v6. Часть 3 - Управление навигацией
год назад·5 мин. на чтение
В этой статье рассмотрим, как перемещаться между роутами. Как добавить ссылки, как перейти по ссылке программно, как передать данные при переходе.
Серия статей о React Router v6 состоит из 4 частей.
Помимо пропса
Проп
Проп
Финальный проп называется
Компонент
Еще
Компонент
Компонент
Хук
Хук
- Основы React Router
- Продвинутые определения маршрутов
- Управление навигацией (рассматривается в этой статье)
- Подробно о роутерах
- Навигация по ссылкам
- Ручная навигация
- Передача данных при навигации
Навигация по ссылкам
Навигация по ссылкам - это самая простая и распространенная форма навигации. Мы уже видели самую простую форму навигации по ссылкам с помощью компонентаLink
.
Однако эти компоненты<Link to="/">Home</Link> <Link to="/books">Books</Link>
Link
могут стать немного сложнее. Например, у вас могут быть абсолютные ссылки, подобные приведенным выше ссылкам, или у вас могут быть ссылки, относящиеся к текущему отображаемому компоненту.
Например, представьте, что мы находимся в маршруте<Link to="/">Home</Link> <Link to="../">Back</Link> <Link to="edit">Edit</Link>
/books/3
с приведенными выше ссылками. Первая ссылка приведет к /
маршруту, так как это абсолютный маршрут. Любой маршрут, начинающийся с /
, является абсолютным маршрутом. Вторая ссылка приведет к маршруту /books
, так как это относительная ссылка, которая поднимается на один уровень вверх от /books/3
к /books
. Наконец, наша третья ссылка перейдет на страницу /books/3/edit
, так как она добавит путь к пропсу to
в конец текущей ссылки, поскольку это относительная ссылка.
to
, есть также 3 других пропса, которые важны для компонента Link
.
replace
Проп replace
имеет логическое значение, которое, если установить в true
, приведет к тому, что эта ссылка заменит текущую страницу в истории браузера. Представьте, что у вас есть следующая история браузера.
Если вы нажмете на ссылку, ведущую на страницу/ /books /books/3
/books/3/edit
, но у нее проп replace
имеет значение `trueё, ваша новая история будет выглядеть следующим образом.
Страница, на которой вы находились в данный момент, была заменена новой страницей. Это означает, что если вы нажмете кнопку «Назад» на новой странице, вы вернетесь на страницу/ /books /books/3/edit
/books
, а не на страницу /books/3
.
reloadDocument
Проп reloadDocument
также является логическим. Если задано значение true
, компонент Link
будет действовать как обычный тег <a>
и выполнять полное обновление страницы при навигации вместо того, чтобы просто повторно отображать содержимое внутри компонента Routes
.
state
Финальный проп называется state
. Этот проп позволяет передавать данные вместе с Link
, которая не отображается нигде в URL-адресе. Рассмотрим эту возможность более подробно, когда будем говорить о навигационных данных.
NavLink
Компонент NavLink
работает точно так же, как компонент Link
, но он предназначен специально для отображения активных состояний ссылок, например, в панелях навигации. По умолчанию, если проп to
у NavLink
совпадает с URL-адресом текущей страницы, к ссылке будет добавлен класс active
, который можно использовать для стилизации. Если этого недостаточно, можно передать функцию с параметром isActive
в className
, или в свойства style
, или в качестве дочерних элементов NavLink
.
<NavLink to="/" style={({ isActive }) => ({ color: isActive ? "red" : "black" })} > Home </NavLink>
NavLink
имеет проп end
, который используется для помощи во вложенной маршрутизации. Например, если мы находимся на странице /books/3
, это означает, что мы визуализируем компонент Book
, который вложен в наш маршрут /books
. Это означает, что если у нас есть NavLink
с to
установленным в /books
, он будет считаться активным. Это связано с тем, что NavLink
считается активным, если URL-адрес to
совпадает с пропсом to
NavLink
или если текущий Route
находится внутри родительского компонента c path
, который совпадает с пропсом to
компонента NavLink
. Если вы не хотите такое поведение по умолчанию, вы можете установить проп end
в true
, чтобы URL-адрес страницы точно соответствовал пропсу to
NavLink
.
Ручная навигация
Иногда нужно вручную перемещаться на основе таких вещей, как отправка формы или отсутствие доступа к определенной странице. Для таких случаев можно использовать либо компонентNavigate
, либо хук useNavigation
.
Компонент Navigate
Компонент Navigate
— это очень простой компонент, который при визуализации автоматически перенаправляет пользователя на значение пропса to
компонента.
Компонент<Navigate to="/" />
Navigate
имеет те же пропсы, что и компонент Link
, таким образом вы можете передать ему to
, replace
и state
.
Хук useNavigation
Хук useNavigation
представляет собой хук, который не принимает никаких параметров и возвращает одну функцию navigate
, которую вы можете использовать для перенаправления пользователя на определенные страницы. Эта функция navigate
принимает два параметра. Первый параметр — это местоположение to
, в которое вы хотите перенаправить пользователя, а второй параметр — это объект, который может иметь ключи для replace
и state
.
Приведенный выше код перенаправит пользователя на маршрутconst navigate = useNavigate() function onSubmit() { // Отправка значения формы navigate("/books", { replace: true, state: { bookName: "Fake Title" }}) }
/books
. Он также заменит текущий маршрут в истории и передаст некоторую информацию через state
.
Другой способ, которым вы можете использовать функцию navigate
, — передать ей число. Это позволит вам имитировать нажатие кнопки вперед/назад.
navigate(-1) // Перемещает назад на одну страницу в истории navigate(-3) // Перемещает назад на три страницу в истории navigate(1) // Перемещает вперед на одну страницу в истории
Передача данных при навигации
Наконец, пришло время поговорить о передаче данных между страницами. Существует 3 основных способа передачи данных между страницами.- Динамические параметры
- Параметры поиска
- Данные состояния/местоположения
Динамические параметры
Мы уже говорили о том, как использовать динамические параметры в URL-адресах с помощью хукаuseParams
. Это лучший способ обработки передаваемой информации, такой как идентификаторы.
Параметры поиска
Параметры поиска — это все параметры, которые идут после?
в URL-адресе (?name=Kyle&age=27
). Для работы с параметрами поиска необходимо использовать хук useSearchParams
, который работает очень похоже на useState
.
В этом примере у нас есть инпут, который по мере ввода будет обновлять поисковую часть нашего URL-адреса. Например, если наш ввод имеет значениеimport { useSearchParams } from "react-router-dom" export function SearchExample() { const [searchParams, setSearchParams] = useSearchParams({ n: 3 }) const number = searchParams.get("n") return ( <> <h1>{number}</h1> <input type="number" value={number} onChange={e => setSearchParams({ n: e.target.value })} /> </> ) }
32
, наш URL-адрес будет выглядеть так: http://localhost:3000?n=32
. Хук useSearchParams
принимает начальное значение, как useState
, и в нашем случае наше начальное значение n
равно 3
. Затем этот хук возвращает два значения. Первое значение - это все наши параметры поиска, а второе значение - это функция для обновления наших параметров поиска. Функция set
просто принимает один аргумент, который является новым значением параметров поиска. Однако первое значение, содержащее параметры поиска, немного более запутанно. Это связано с тем, что это значение относится к типу URLSearchParams
. Вот почему нам нужно использовать синтаксис .get
в строке 5 выше.
Данные состояния/местоположения
Вся эта информация в этом случае будет доступна через хукuseLocation
. Использовать этот хук очень просто, так как он возвращает одно значение и не принимает никаких параметров.
Если у нас есть следующий URLconst location = useLocation()
http://localhost/books?n=32#id
то возвращаемое значение useLocation
будет выглядеть следующим образом.
Этот объект местоположения содержит всю информацию, относящуюся к нашему URL-адресу. Он также содержит уникальный ключ, который можно использовать для кэширования, если вы хотите кэшировать информацию, когда пользователь нажимает кнопку «Назад», чтобы вернуться на страницу. Вы также заметите, что у нас есть проп{ pathname: "/books", search: "?n=32", hash: "#id", key: "2JH3G3S", state: null }
state
, возвращаемое из useLocation
. Эти данные состояния могут быть любыми и передаются между страницами без сохранения в URL-адресе. Например, если вы нажмете на Link
, которая выглядит следующим образом:
тогда значение состояния в объекте<Link to="/books" state={{ name: "Kyle" }}>
location
будет установлено в { name: "Kyle" }
.
Это может быть очень полезно, если, например, вы хотите отправлять простые сообщения между страницами, которые не должны храниться в URL-адресе. Хорошим примером этого может быть что-то вроде сообщения об успешном завершении, которое отправляется на страницу, на которую вы перенаправляетесь после создания новой книги.