将带有参数的函数作为 prop 传递并在 React 内部调用它

Question

我的 React 应用程序中有一个 Badge 组件。徽章可以涂成不同的颜色。为了使其更加通用，我决定添加一个名为 getBadgeColor 的道具。这个想法是针对不同的需求实现不同的功能。例如，在一种情况下，我需要用于加载状态的徽章。所以我实现了 getStatusBadgeColor 函数，如下所示：

enum BadgeColors {
    RED = 'red',
    YELLOW = 'yellow',
    GREEN = 'green',
    BLUE = 'blue',
    INDIGO = 'indigo',
    PURPLE = 'purple',
    PINK = 'pink',
}

export type BadgeColor = typeof BadgeColors[keyof typeof BadgeColors];

export type getBadgeColor<T> = (value: T) => BadgeColor;

export const getStatusBadgeColor: getBadgeColor<TStatus> = (status: TStatus) => {
    switch (status) {
        case Statuses.STATUS_SUCCESS:
            return BadgeColors.GREEN;
        case Statuses.STATUS_ERROR:
            return BadgeColors.INDIGO;
        default:
            return BadgeColors.BLUE;
    }
}

我的徽章组件如下所示。

interface BadgeProps<T> {
    label: string;
    color?: BadgeColor;
    getBadgeColor?: getBadgeColor<T>;
    value?: T
}

export const Badge = <T,>({ label, color, getBadgeColor}: BadgeProps<T>) => {

    const colorValue = getBadgeColor ? getBadgeColor() : color

    return (
        <span className="...">
            <svg className={cn('h-1.5', 'w-1.5', `fill-${colorValue}-500`)} viewBox="0 0 6 6" aria-hidden="true">
                <circle cx={3} cy={3} r={3} />
            </svg>
            {label}
        </span>
    )
}

我这样传递函数

<Badge label={record.status} getBadgeColor={() => getStatusBadgeColor(record.status)}  />

所以问题基本上是我无法在不使用参数调用 Badge 组件内的函数的情况下调用它。我有办法做到吗？我将不胜感激任何帮助

Answer 1

您的函数类型需要一个参数，因为函数类型中有

value: T

。这本质上告诉打字稿“嘿，无论如何，都会有一个参数传递给这个函数，并且它将是 T 类型”。解决此问题的一种快速而简单的方法是执行

value?: T

，因为这告诉打字稿该参数“可能存在或可能不存在”，或者它可能是未定义的。新类型看起来像这样：

export type getBadgeColor<T> = (value?: T) => BadgeColor;

但是，您可能需要重新考虑传递给组件的 prop 类型以提高清晰度。如果你要简单地表达你传递给反应组件的类型，它看起来像这样：

interface BadgeProps<T> {
    label: string;
    color?: BadgeColor;
    getBadgeColor?: () => ReturnType<getBadgeColor<T>>;
    value?: T
}

因为您传递给它一个调用

getBadgeColor

的函数。

由于您只是传递一个不需要输入并且应该返回徽章颜色的匿名函数，因此也许可以考虑使用类似的东西作为您的 prop 类型：

interface BadgeProps<T> {
    label: string;
    color?: BadgeColor;
    getBadgeColor?: () => BadgeColor;
    value?: T
}

这还使您可以灵活地从传入的函数返回纯徽章颜色，如果您最终将徽章颜色存储在状态或其他内容中，这可能会有所帮助。