Как узнать тип свойств (props) у компонента child?

Как я могу получить тип `onChange` из дочернего компонента `<FormItem>`? Я попытался использовать определенные типы, но получаю `unknown` для `event`. Существует ли способ извлечь пропсы из дочернего компонента, который является `ReactElement`, или нужно использовать функцию в качестве дочернего элемента?
  • 3 мая 2024 г. 19:10
Ответы на вопрос 2
Если вы хотите узнать тип свойств (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&lt;T&gt; = T extends React.ReactElement&lt;infer P&gt; ? P : never;

type FormItemProps&lt;
  C extends React.ReactElement,
  P extends ReturnElementProps&lt;C&gt;
&gt; = {
  getValueFromEvent: (...args: Parameters&lt;P["onChange"]&gt;) =&gt; void;
  children: C;
};

const FormItem = &lt;
  C extends React.ReactElement,
  P extends ReturnElementProps&lt;C&gt;
&gt;(
  props: FormItemProps&lt;C, P&gt;
) =&gt; {
  // из пропсов вашего компонента берём дочерний элемент
  const { children } = props;
  // из пропсов дочернего берем onChange
  const { onChange } = children.props;
  //тест
  console.log("Child onChange cb", onChange.toString());
  return children;
};

export default function App() {
  return (
    &lt;div className="App"&gt;      
      &lt;FormItem getValueFromEvent={(event) =&gt; event}&gt;
        &lt;input onChange={(e) =&gt; console.log("Children e", e.target.value)} /&gt;
      &lt;/FormItem&gt;
    &lt;/div&gt;
  );
}</code></pre>
Похожие вопросы