reactjs - 无法将诸如 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'.

我希望这会起作用，因为MyComponentPropsextendsHTMLAttributes有我想要的道具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 {};

标签： reactjsreact-propsreact-functional-component

Answer 1

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

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

在引擎盖下，JSX.IntrinsicElements['div']是以下类型。

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