Question

我正在努力创建一个 TypeScript 友好的 NPM 包，但是我在将常见的 HTML 属性作为 className 和 style 之类的道具传递给我的组件时遇到了问题。我希望不必通过扩展具有所有所需道具的界面来手动将每个属性添加到我的道具列表中。我的简化组件如下所示：

import React, { Key, ReactElement } from "react";

interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
    customText: string;
    uniqueKey?: Key;
}

export function MyComponent({uniqueKey, customText, ...props}: MyComponentProps): ReactElement {
    return (
        <div key={uniqueKey} {...props}>{customText}</div>
    );
}

我创建了一个 uniqueKey 道具，因为它不能只命名为 key（与 ref 相同）。我试图扩展一个 props 参数以将任意道具传递给我的组件，但它似乎没有什么区别。我将此组件导入到我的项目中，并尝试像这样调用它：

<MyComponent customText="Hello World" uniqueKey={123} className="myClass" />

我收到错误：Property 'className' does not exist on type 'MyComponentProps'.

我希望这会奏效，因为 MyComponentProps extends HTMLAttributes 有我想要的道具，比如 className 和 style。

我的 index.d.ts 文件看起来像：

import React, { Key, ReactElement } from "react";
interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
    customText: string;
    uniqueKey?: Key;
}
export declare function MyComponent({ uniqueKey, customText, ...props }: MyComponentProps): ReactElement;
export {};

Answer 1

获取特定 HTML 元素可用道具的最简单方法是使用 JSX.IntrinsicElements。

type MyComponentProps = JSX.IntrinsicElements['div'] & {
    customText: string;
    uniqueKey?: Key;
}

实际上，JSX.IntrinsicElements['div'] 是以下类型。

React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

无法将 className 或 style 等道具传递给自定义组件的道具

1 个答案: