reactjs – 使用className prop的React TypeScript

发布时间：2020-12-15 05:06:35 所属栏目：百科来源：网络整理

导读：在自定义组件中键入和使用className prop的正确方法是什么？我曾经能够做到这一点： class MyComponent extends React.ComponentMyProps,{} { ...} 然后使用我的组件： MyComponent className="my-class" / 请注意,我不会在MyProps中定义className,但以前键

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

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

然后使用我的组件：

<MyComponent className="my-class" />

请注意,我不会在MyProps中定义className,但以前键入的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类型.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!