className在自定义组件中键入和使用prop的正确方法是什么？我曾经能够做到这一点：
class MyComponent extends React.Component<MyProps, {}> {
...
}
然后通过以下方式使用我的组件：
<MyComponent className="my-class" />
请注意，我不会定义classNamein MyProps，尽管之前已键入 React 以支持此用法。
现在，我现在看到此类型错误：
Property 'className' does not exist on type 'IntrinsicAttributes &
IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{
childr...'
定义/键入我的组件的正确方法是什么，以便我className在使用我的组件时使用它？
您可以使用该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类型中。
对于像我一样正在寻找功能组件解决方案的人。
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> {}