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

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 扩展了 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 等道具传递给自定义组件的道具

Can't pass props like className or style to custom component's props

reactjs

react-props

react-functional-component