在自定义组件中键入和使用className
道具的正确方法是什么?我曾经能够做到这一点:
class MyComponent extends React.Component<MyProps, {}> {
...
}
然后通过以下方式使用我的组件:
<MyComponent className="my-class" />
请注意,我不会在className
中定义MyProps
,但之前已对React进行了输入以支持此用法。
现在,我现在看到这种类型的错误:
Property 'className' does not exist on type 'IntrinsicAttributes &
IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{
childr...'
定义/输入我的组件的正确方法是什么,这样我可以在使用我的组件时使用className
?
答案 0 :(得分:17)
您可以使用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
类型。
答案 1 :(得分:12)
对于像我一样正在寻找功能组件解决方案的人。
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> {}