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

Как получить данные из дочернего компонента?

Компоненты

Данные из дочернего компонента получают через колбэк, переданный сверху: ребёнок вызывает функцию родителя со своими данными. Это единственный штатный способ — поток данных однонаправленный.

Колбэк-проп

const Parent = () => {
  const [value, setValue] = useState('');

  return <SearchInput onSearch={setValue} />;   // передали функцию вниз
};

const SearchInput = ({ onSearch }) => {
  const [text, setText] = useState('');
  return (
    <input
      value={text}
      onChange={(e) => { setText(e.target.value); onSearch(e.target.value); }}
    />
  );
};

Фактически это «подъём состояния»: данные, нужные родителю, живут у родителя; ребёнок лишь сообщает о событиях.

Императивный доступ через ref

Когда нужно вытащить значение по требованию (а не подписываться на каждое изменение):

const FormRef = forwardRef((props, ref) => {
  const [data, setData] = useState({});
  useImperativeHandle(ref, () => ({ getValues: () => data }), [data]);
  ...
});

// родитель:
const formRef = useRef(null);
const handleSave = () => api.save(formRef.current.getValues());

Точечный приём (валидация, reset, чтение значений формы), не общий стиль.

Через общее хранилище

Если данные нужны не только родителю: контекст, стор (Zustand/Redux) или серверный кеш — ребёнок пишет, кто угодно читает.

Чего не делать

Мутировать переданный объект-проп ради «возврата» данных, читать DOM ребёнка через querySelector, обращаться к его state напрямую.

Коротко для собеседования

Штатно — колбэк-проп: родитель передаёт функцию, ребёнок вызывает её с данными (подъём состояния). Императивно и по требованию — ref + useImperativeHandle (getValues, validate). Если данные нужны шире — контекст или стор. Прямого «чтения state ребёнка» в React нет.

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