reactjs - const Vs 函数在 React Typescript 中创建组件

Question

如何使用 function 而不是 const 制作此组件？

const MyComponent: React.FC = () => {
  return <div>My Component</div>;
}

我试过这样做

function MyComponent (): React.FC { 
  return <div>My Component</div>;
}

但是，我的编辑突出显示了 return 语句并给出了这个错误:

类型“元素”不可分配给类型“FC<{}>”。类型 'ReactElement ' 不提供签名匹配 '(props: { children?: ReactNode; }, context?: any): ReactElement |空'.ts

Answer 1

首先，我建议您了解在 JS 中声明函数的各种方式之间的差异。也就是说，您可以将函数声明为 函数声明 或 函数表达式。

例子:

function myFunction(){
    return 'This is a function declaration.'; 
}

const fun1 = function() {
    return 'This is a function expression using a normal function.';
}

const fun = () => {
    return 'This is a function expression with an arrow function.';
}

现在，为了回答您的问题，您不能在函数声明中使用 React.FC，因为在函数声明中执行以下操作时:

function fun() : React.FC {
//do something
}

Typescript 以您尝试指定 fun() 函数的返回类型的方式对其进行解释。相反，您想要做的是:

function HomeComponent(): React.ReactNode {
  return <h1>Hello, world!</h1>
}

以便 TS 理解此函数将返回某种类型的 ReactNode。

当你有带有函数声明的 props 时，你会这样做:

type Props = {
  message: string;
}

function HomeComponent({ message }): React.ReactNode {
  return <div>{message}</div>
}