React TypeScript 使用 className 属性

Question

在自定义组件中键入和使用 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 的组件的正确方法是什么？

原文由 mattnedrich 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 类型。

原文由 Nitzan Tomer 发布，翻译遵循 CC BY-SA 3.0 许可协议