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

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

React + TypeScript：将React组件作为道具传递，使用道具进行渲染[错误：TS2339]

1 个答案: