reactjs React + TypeScript使用className属性

zujrkrfu 于 2023-05-28 发布在 React

关注(0)|答案(4)|浏览(233)

在自定义组件中键入和使用className属性的正确方法是什么？我以前可以这样做：

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？

reactjs

来源：https://stackoverflow.com/questions/44369706/react-typescript-usage-of-classname-prop

4条答案

按热度按时间

bvjxkvbb1#

您可以使用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类型中。

赞(0）回复(0）举报 2023-05-28

a7qyws3x2#

对于那些正在寻找功能组件解决方案的人来说，就像我一样。

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> {}

赞(0）回复(0）举报 2023-05-28

inkz8wg93#

添加react-native-class-name.polyfill.d.ts

import 'react-native';
// polyfill className prop for react-native Components
declare module 'react-native' {
  interface TextProps {
    className?: string;
  }
  interface PressableProps {
    className?: string;
  }
  interface TextInputProps {
    className?: string;
  }

  interface ViewProps {
    className?: string;
  }
  interface InputAccessoryViewProps {
    className?: string;
  }

  interface ImagePropsBase {
    className?: string;
  }

  interface TouchableWithoutFeedbackProps {
    className?: string;
  }
  // others StyleProp<?> in node_modules/@types/react-native extends up show, should not define again.
}

赞(0）回复(0）举报 2023-05-28

kmb7vmvb4#

我自己总是使用HTMLProps类型，通过如下方式获取className：