React + TypeScript: Passing React Component as Props, rendering with props [Error: TS2339]

Question

我正在使用 React + TypeScript。我有一个场景，我必须将 React.SFC 组件传递给另一个组件。我这样做是这样的：

Container.tsx

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

现在的问题是，我想在 ParentComponent.

中用 someArray 值迭代这个 ChildComp 组件

这个子组件有它自己的 prop someValue，我给它添加了类型，比如这个子组件可以接受的类型，我在 Parent 中迭代它时传递这个 prop。

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 prop 的特定组件。 ParentComponent 道具可能应输入为：

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

React + TypeScript: Passing React Component as Props, rendering with props [Error: TS2339]

React + TypeScript: Passing React Component as Props, rendering with props [Error: TS2339]

javascript

typescript

reactjs

react-props

react-component