Как я могу получить тип `onChange` из дочернего компонента `<FormItem>`? Я попытался использовать определенные типы, но получаю `unknown` для `event`. Существует ли способ извлечь пропсы из дочернего компонента, который является `ReactElement`, или нужно использовать функцию в качестве дочернего элемента?
Если вы хотите узнать тип свойств (props) у компонента child, вы можете использовать TypeScript и propTypes.
Чтобы получить тип `onChange` из дочернего компонента `<FormItem>`, вы можете использовать TypeScript и указать тип данных в качестве атрибута `onChange`. Например:
```tsx
interface FormItemProps {
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
const FormItem: React.FC<FormItemProps> = ({ onChange }) => {
return <input type="text" onChange={onChange} />;
}
const ParentComponent: React.FC = () => {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log(event.target.value);
};
return <FormItem onChange={handleChange} />;
}
```
В этом примере `onChange` принимает функцию с параметром типа `React.ChangeEvent<HTMLInputElement>`. Таким образом, `event` будет уже иметь нужный тип данных при использовании в дочернем компоненте.
Немного не ясно что вы хотите, вот это получать? <br/> <pre><code class="javascript">type ReturnElementProps<T> = T extends React.ReactElement<infer P> ? P : never;
type FormItemProps<
C extends React.ReactElement,
P extends ReturnElementProps<C>
> = {
getValueFromEvent: (...args: Parameters<P["onChange"]>) => void;
children: C;
};
const FormItem = <
C extends React.ReactElement,
P extends ReturnElementProps<C>
>(
props: FormItemProps<C, P>
) => {
// из пропсов вашего компонента берём дочерний элемент
const { children } = props;
// из пропсов дочернего берем onChange
const { onChange } = children.props;
//тест
console.log("Child onChange cb", onChange.toString());
return children;
};
export default function App() {
return (
<div className="App">
<FormItem getValueFromEvent={(event) => event}>
<input onChange={(e) => console.log("Children e", e.target.value)} />
</FormItem>
</div>
);
}</code></pre>