Доступ родителя к DOM ребёнка
Вопрос
Родителю нужно ставить фокус в поле, которое лежит внутри твоего компонента SearchBox. Как это сделать в React 19 и когда лучше обойтись без ref?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
В React 19 `ref` приходит как проп, его вешают на внутренний input
До React 19 для этого нужен был forwardRef
Через useImperativeHandle можно отдать только нужные методы, например focus
Императивный API для фокуса, прокрутки, медиа, а не для того, что выражается props
Альтернатива: проп `autoFocus` или декларативный флаг
Ref на компонент даёт связность: родитель зависит от внутренностей ребёнка
Что могут спросить следом
- Как типизировать такой проп ref в TypeScript?
- Что вернёт ref, если повесить его на классовый компонент?
- Почему не отдать весь DOM-узел?
Разбор
В React 19 всё просто: SearchBox принимает ref как обычный проп и вешает его на внутренний <input>. Родитель создаёт useRef(null), передаёт его и в обработчике вызывает ref.current.focus(). Раньше для этого был нужен forwardRef, в старом коде он встречается часто. Если не хочу раскрывать весь DOM-узел, использую useImperativeHandle и отдаю объект только с focus и, например, clear. Так родитель не сможет поменять стили или удалить узел. При этом императивный путь оставляю для действий, которые плохо выражаются данными: фокус, прокрутка, запуск видео. Если задача «открыть» или «показать», делаю это через props, иначе логика размазывается между компонентами.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.