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

Question

Евгений

react , typescript

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

Как я могу получить тип `onChange` из дочернего компонента `<FormItem>`? Я попытался использовать определенные типы, но получаю `unknown` для `event`. Существует ли способ извлечь пропсы из дочернего компонента, который является `ReactElement`, или нужно использовать функцию в качестве дочернего элемента?

3 мая 2024 г. 19:10

Ответы на вопрос 2

Похожие вопросы

Answer 1

Если вы хотите узнать тип свойств (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` будет уже иметь нужный тип данных при использовании в дочернем компоненте.

Answer 2

Немного не ясно что вы хотите, вот это получать? 
 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>
  );
}