为什么在React+Typescript中为FC定义空接口?

Question

我在一个React+Typescript项目中见过这样的代码:

interface MyInterface {}
export const MyComponent: FC<MyInterface> = () => {
// Code here
}

声明一个空接口有什么意义?为什么不像这样使用空花括号呢?

export const MyComponent: FC<{}> = () => {
// Code here
}

React版本为18.1.0

Answer 1

除非您需要，否则您不一定需要将泛型传递给组件。在这个例子中，你写:

interface MyInterface {}
export const MyComponent: FC<MyInterface> = () => {
// Code here
}

这意味着您正在传递一个接口MyInterface，该接口将被设置为组件的props的类型。为了便于理解，上面的代码块和下面的代码块是一样的(把MyComponent看作一个普通的函数):

interface MyInterface {}
export const MyComponent = (props: MyInterface) => {
// Code here
}

但是如果你的组件中没有props，那么下面的代码也可以正常工作。你不需要用不必要的泛型来使你的代码复杂化。

export const MyComponent = () => {
// Code here
}