Как параметризировать тип данных TypeScript передаваемый в просы компонента react?

Question

Мне нужно описать тип входящих пропсов для компонента Radio. Компонент реализует паттерн рендер пропс и получает: пропс render, который содержит компонент который нужно отрендерить; и пропс data, который содержит объект пропсов, которые нужно передать в render. При этом в data может приходить любой объект, но в render должна приходить функция которая на входе получает такой же тип данных как у data, а на выходе возвращает jsx. Т.е. если в data тип T, то тогда в render должно приходить (props: Т) => JSX.

Подскажите, пожалуйста, как описать тип такого компонента через джинерики ts, и как потом вызывать этот компонент?

Answer 1

interface Props<D> {
  data: D;
  renderSomething: (data: D) => React.ReactNode;
}

function Abobus<T>({ data, renderSomething }: Props<T>) {
  return <div>{renderSomething(data)}</div>;
}

<Abobus <number> data={5} renderSomething={d => <span>{d}</span>} />

БЛОГ НА HUSL

Как параметризировать тип данных TypeScript передаваемый в просы компонента react?

Ответы (1 шт):