简介

在React中，React.FC 是 React.FunctionComponent 的缩写，用于定义一个函数式组件的类型。这是TypeScript与React结合使用时常见的一种类型定义方式，可以为组件提供类型检查和自动补全等功能。使用 React.FC 来定义组件不仅可以指定组件的props类型，还包括对children的隐式支持，以及对默认的静态属性如 displayName 的支持。

代码结构

React.FC

1	type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {  
    (props: P, context?: any): ReactNode;  
    propTypes?: WeakValidationMap<P> | undefined;  
    contextTypes?: ValidationMap<any> | undefined;  
    defaultProps?: Partial<P> | undefined;  
    displayName?: string | undefined;  
}

示例代码

'use client'
import React from "react";


interface Props {
    title: string;
    onClick: () => void;
}

// 使用 React.FC<Props>来定义组件，其使用泛型的类型定义，明确指出组件接收的props类型为 Props。
const MyButton: React.FC<Props> = ({ title, onClick }) => {
    return <button onClick={onClick}>{title}</button>;
};

// 也可直接定义一个箭头函数，其参数的类型直接在参数中声明
const SecondButton = ({title,onClick} :  Props )  => {
    return <button onClick={onClick}>{title}</button>;
}

export default function Page() {
    return (
        // 窗口居中显示MyButton组件
        <div className={`w-screen h-screen flex flex-col space-y-4 justify-center items-center`}>
            <MyButton title="Click Button 1" onClick={() => window.alert("clicked")} />
            <SecondButton title="Click Button 2" onClick={() => window.alert("clicked Second Button")} />
        </div>
    )
}