Question

如何编写一个以React组件为支撑的React组件？

我想写这样的代码：

const MyComponent = () => (
  <span>Hello</span>
);

// this throws "TS2339: Property 'Comp' does not exist on type 'FC{ Comp: FC ; }>'."
const MyComponent2 = ({ Comp = MyComponent }: React.FC<{
  Comp: React.ReactNode;
}>) => (
  <span>
    <Comp />
  </span>
);

我不想使用类似any之类的东西，也不想禁用打字稿类型检查。

Answer 1

您正在混淆道具类型和变量类型。您实际上在这里做了什么：

= ({ Comp = MyComponent }: React.FC<{
  Comp: React.ReactNode;
}>)

基本上，您告诉TS道具对象是一个 React.FC ，显然不是。

所以要么在变量声明后立即移动类型：

const MyComponent2: React.FC<{
   Comp: React.ReactNode;
}> = ({ Comp = MyComponent }) => (

或仅删除React.FC：

const MyComponent2 = ({ Comp = MyComponent }: {
   Comp: React.ReactNode;
}) => (

Answer 2

interface Props {
    comp: JSX.Element // (or React.ReactNode or React.FC, whatever your use case is)
}

const MyComponent: React.FC<Props> = (props) => {}

我不相信React.FC是组件的返回类型。这是函数本身的类型。

如何将ReactNode定义为打字稿反应组件的道具？

2 个答案: