输入 React 命名空间

Question

我正在尝试弄清楚如何键入 React 命名空间。

目前我有一个组件

import {Head} from "./head/head";
import {Body} from "./body/body";

interface Props {
  id: string
}

const Component:React.FC<Props> = ({id}) =>{
return <span>Hello World</span>
};

Component.Head = Head;
Component.Body = Body;

用法类似于

<Component>
 <Component.Head></Component.Head>
 <Component.Body></Component.Body>
</Component>

我一直收到这个输入错误

Property 'Head' does not exist on type 'FC'

我错过了什么？

Answer 1

好吧，您是说“组件”的类型是 React.FC。这意味着它具有 React.FC.

中定义的类型的属性/结构

但是，你又给Component定义了Head和Body两个属性，React.FC类型中没有定义

因此，如果您确实想在代码中执行您正在尝试的操作，则需要定义您自己的类型来扩展 React.FC 并需要 Head 和 Body 属性。

type TypeNameHere<Props> = React.FC<Props> & {
  Head: *TypeOfWhateverHeadWillBeHere*;
  Body: *TypeOfWhateverBodyWillBeHere*;
};

然后您将使用它来定义组件

const Component:TypeNameHere<Props> = ....;

我将提供一个没有 React 的更简单的示例来展示：

type TypeExample1 = (props: string) => void;

const Component:TypeExample1 = (name) => console.log(name);

Component.Head = 'Head here'; //Error: Property Head does not exist on type TypeExample1
Component.Body = 'Body here'; //Error: Property Body does not exist on type TypeExample1

上面的代码会导致同样的错误，因为根据 TypeExample1 的定义，它应该只是一个接受字符串的函数，returns什么都没有，没有 Head 或 Body 的任何属性。

然而，下面的代码将通过创建一个新类型 TypeExample2 来实现这一点，该类型扩展 TypeExample1 以还包括 Head 和 Body 的属性：

type TypeExample1 = (props: string) => void;

type TypeExample2 = TypeExample1 & {Head: string; Body: string;}

const Component:TypeExample2 = (name) => console.log(name);


Component.Head = 'Head here';
Component.Body = 'Body here';

希望对您有所帮助！

输入 React 命名空间

Typing React Namespaces

typescript

reactjs

typescript-typings

react-typescript