键入 React 命名空间

Posted 2023-03-13

【中文标题】键入 React 命名空间

【英文标题】：Typing React Namespaces

【发布时间】：2021-11-20 23:11:38

【问题描述】：

我正在尝试弄清楚如何键入 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>

我不断收到这个输入错误

“FC”类型上不存在属性“Head”

我错过了什么？

【参考方案1】：

你是说“组件”是 React.FC 类型的。这意味着它具有 React.FC 中定义的类型的属性/结构。

但是，你给组件两个属性 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的定义，它应该只是一个接受字符串并且不返回任何内容的函数，没有任何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';

希望有帮助！

【讨论】：

谢谢@kevin。解释的很好！

@JohnZ 很高兴我能帮上忙！