Как получить данные из дочернего компонента?
Компоненты
Данные из дочернего компонента получают через колбэк, переданный сверху: ребёнок вызывает функцию родителя со своими данными. Это единственный штатный способ — поток данных однонаправленный.
Колбэк-проп
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 нет.