React + TypeScript: передача компонента React в качестве реквизита, рендеринг с реквизитом [Ошибка: TS2339]

Question

Я использую React + TypeScript.У меня есть сценарий, в котором я должен передать компонент React.SFC другому компоненту.Что я делаю так:

Container.tsx

import ChildComp from './ChildComp';
<ParentComponent CustomComp={ ChildComp } someArray={ [1, 2] } />

Теперь проблема в том, что я хочу повторить этот ChildComp компонент со значением someArrayВнутри ParentComponent.

Этот дочерний компонент имеет свою собственную опору someValue, и я добавил к ней типы, например, что может принимать этот дочерний компонент, и я передаю эту опору, перебирая ее внутри Parent..

ParentComponent.tsx

const content = someArray.map((value, index) => (
  <CustomComp someValue={ value } key={ index } />
));
{ content }

Но я получаю ошибку, что TS2339: Property 'someValue' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

Хотя, если я использую вышеупомянутую итерацию вContainer.tsx куда я его импортирую, работает нормально.Но не работает, если я передаю его другому компоненту.Я что-то здесь упускаю?

Примечание: Так как та же итерация работает на Container.tsx, я передаю повторяющийся контент в ParentComponent и отображаю его как переменную:

{ CustomComp }

Это работает, но я хочу знать, почему не работает другое решение.

Подробнее

ChildComp.tsx

type Props = {
   someValue: number,
};

const ChildComp: React.SFC<Props> = ({ someValue }) => {
   return (
      // Content
      { someValue }
   )
}

Тип CustomComp, в ParentComponent:

type Props = {
   CustomComp?: React.ReactNode | null
};

До этого было React.ComponentType, но я получал ошибку, поэтому я изменил ReactNode, так как япрямо сейчас передаю контент.

Answer 1

CustomComp реквизит набран неправильно.Он принимает компонент (CustomComp={ ChildComp }), а не элемент (CustomComp={ <ChildComp /> }).В этом случае это будет не React.ReactNode, а React.ComponentType.

Это также не случайный компонент, а конкретный компонент, который принимает someValue проп.ParentComponent реквизиты, скорее всего, должны быть набраны как:

type ParentCompProps = {
   CustomComp: React.ComponentType<ChildCompProps>,
   someArray: number[]
};