PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Как изменить из родительского компонента свойства дочернего?

Компоненты

Прямо «изменить свойства дочернего компонента» родитель не может: props иммутабельны, а состояние ребёнка приватно. Влиять можно тремя способами.

1. Передать новые props (штатный путь)

Родитель хранит данные у себя и передаёт вниз; изменение его state приводит к новым props у ребёнка:

const Parent = () => {
  const [open, setOpen] = useState(false);
  return <Panel isOpen={open} />;   // «меняем свойство» через своё состояние
};

Это и есть однонаправленный поток: источник правды — у родителя (подъём состояния).

2. Сбросить внутреннее состояние ребёнка через key

Если нужное «свойство» — внутренний state ребёнка (введённый текст, шаг визарда), его нельзя изменить извне, но можно пересоздать компонент:

<StepForm key={formVersion} />   // смена key → размонтирование и чистый state

3. Императивный вызов метода ребёнка (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 ребёнка невозможно — поток данных однонаправленный.

Другие вопросы раздела