使用className prop的React + TypeScript

Question

className在自定义组件中键入和使用prop 的正确方法是什么？我曾经能够做到这一点:

class MyComponent extends React.Component<MyProps, {}> {
  ...
}

然后使用我的组件:

<MyComponent className="my-class" />

请注意,我不会定义className中MyProps,虽然阵营先前输入的支持这种用法.

现在,我现在看到这种类型的错误:

Property 'className' does not exist on type 'IntrinsicAttributes & 
IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ 
childr...'

定义/键入我的组件的正确方法是什么,这将允许我className在使用我的组件时使用？

Answer 1

您可以使用该HTMLAttributes类型,例如:

class MyComponent extends React.Component<MyProps & React.HTMLAttributes<HTMLDivElement>, {}> {
    render() {
        return <div className={ this.props.className }>My Div</div>
    }
}

这样你就可以传递html元素可能需要的任何属性.

如果您只需要该className属性,那么您可以这样做:

class MyComponent extends React.Component<MyProps & { className: string }, {}> {
    render() {
        return <div className={ this.props.className }>My Div</div>
    }
}

或者只是将其添加到您的MyProps类型中.

Answer 2

对于像我一样正在寻找功能组件解决方案的人。

type Props = {
  className?: string
}

const MyComponent: React.FC<Props> = (props) => (
  <div className={props.className}>{props.children}</div>
)

export default MyComponent

或者如果你想单独声明接口：

interface OnlyClassNameInterface extends React.FC<{className: string}> {}

const MyComponent: OnlyClassNameInterface = (props) => (
  <div className={props.className}>{props.children}</div>
)

export default MyComponent

你可以将界面移动到另一个文件

import React from 'react'

type MixProps<P> = P & {className?: string}

export interface OnlyClassNameInterface<P = {}> extends React.FC<MixProps<P> {}

Answer 3

我自己总是通过这样HTMLProps获取类型来使用该类型：className

HTMLProps<HTMLElement>["className"];

TailwindCSS它也可以与类名自动完成功能完美配合。