Возможно ли получить тип пропсов у child?

Question

[Евгений Трофимов]

Делаю библиотеку для работы с формой, у FormItem в моей либе есть поле getValueFromEvent. Это сделано например для кейса:

<FormItem
  name="myField"
  getValueFromEvent={e => Number(e.target.value})
  normalize={value => String(value)}
>
  <input />
</FormItem>

Могу ли я достать тип onChange из ?

Пробовал вот так -

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>) => {
  return <div>{props.children}</div>
}

const Test = <FormItem getValueFromEvent={(event) => event}>
  <input />
</FormItem>

но event - unknown.

можно как-то вытащить пропсы из children, который ReactElement? Или только заставлять использовать function в качестве children?

Answer 1

[Александр Талалаев]

Немного не ясно что вы хотите, вот это получать?

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>
  );
}

Comments

[Евгений Трофимов]

Я хочу получить лишь тип
<FormItem getValueFromEvent={(event) => event}>
чтобы в getValueFromEvent у event был тип ChangeEvent, а не any

[Евгений Трофимов]

Например, если бы children был не ReactElement, а например FC, то я бы мог достать его тип вот таким образом:

type ReturnFCProps<T> = T extends React.FC<infer P extends { value: any, onChange: (props: any) => any }> ? P : never

type FormItemProps<C extends React.FC<any>, P extends ReturnFCProps<C>> = { getValueFromEvent: (...args: Parameters<P['onChange']>) => void, children: C }

const FormItem = <C extends React.FC<any>, P extends ReturnFCProps<C>>(props: FormItemProps<C, P>) => {
  return <div>{React.createElement(props.children)}</div>
}

const MyComponent: React.FC<{ value: number, onChange: (e: React.ChangeEvent<HTMLInputElement>) => void }> = () => <></>

// Вот тут у event будет тип React.ChangeEvent и будет работать автодополнение
const Test = <FormItem getValueFromEvent={(event) => event.target.value}>{MyComponent}</FormItem>

Но мне интересно, возможно ли получить тот же результат, но с ReactElement в качестве child

[Александр Талалаев]

Евгений Трофимов, если честно в целом пока не ясен ваш архитектурный воркфлоу, почему тогда просто не использовать на формИтем onChange: (e: React.ChangeEvent) => void, ведь события onChange будут исключительно такие? Или вы делаете что-то в тч за рамками html?

[Евгений Трофимов]

Александр Талалаев, children может быть любым компонентом, не только input, но и какой-нибудь Select, у которого тоже есть value и onChange и в нем уже не React.ChangeEvent, а что-то другое. Метод getValueFromEvent нужен для того, чтобы была возможность привести значение к тому типу, который ожидается при submit формы

внутри FormItem я просто прокидываю в children onChange и value, там примерно такое

React.cloneElement(children, {
  onChange: (e) => myFormContext.setFieldValue(field, getValueFromEvent(e)),
  value: normalize(myFormState[field])
})

В целом мой вопрос скорее про типизацию, мне интересно, можно ли сделать children-а, который ReactElement генериком и вытащить из него пропсы или нет. Довольно странно, если нельзя, так как под капотом у JSX просто функция createElement, а из функции точно можно

Но вообще, кажется, что лучший вариант в моем случае - это использовать render function

<FormItem name="myField">
{({ value, onChange }) => <input value={String(value)} onChange={e => onChange(Number(e.target.value))} />}
</FormItem>