Как изменить из родительского компонента свойства дочернего?
Компоненты
Прямо «изменить свойства дочернего компонента» родитель не может: props иммутабельны, а состояние ребёнка приватно. Влиять можно тремя способами.
1. Передать новые props (штатный путь)
Родитель хранит данные у себя и передаёт вниз; изменение его state приводит к новым props у ребёнка:
const Parent = () => {
const [open, setOpen] = useState(false);
return <Panel isOpen={open} />; // «меняем свойство» через своё состояние
};Это и есть однонаправленный поток: источник правды — у родителя (подъём состояния).
2. Сбросить внутреннее состояние ребёнка через key
Если нужное «свойство» — внутренний state ребёнка (введённый текст, шаг визарда), его нельзя изменить извне, но можно пересоздать компонент:
<StepForm key={formVersion} /> // смена key → размонтирование и чистый state3. Императивный вызов метода ребёнка (ref)
Когда действие не выражается декларативно (фокус, reset, play):
const FancyInput = forwardRef((props, ref) => {
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }), []);
return <input ref={inputRef} />;
});
// родитель:
const ref = useRef(null);
<FancyInput ref={ref} />;
ref.current.focus();В React 19 ref приходит обычным пропом — forwardRef не нужен.
Чего делать нельзя
Мутировать props в ребёнке, лезть в DOM ребёнка через querySelector, «пробрасывать» setState ребёнка наверх ради обхода архитектуры — обычно это сигнал поднять состояние.
Коротко для собеседования
Через props (родитель держит состояние — подъём состояния), через смену key (пересоздание ребёнка со сбросом его внутреннего state) или императивно через ref + useImperativeHandle (focus, reset, play). Прямое изменение props или state ребёнка невозможно — поток данных однонаправленный.