className 프로펠의 React + TypeScript 사용

className 프로펠의 React + TypeScript 사용

를 입력하고 사용하는 올바른 방법은 무엇입니까?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내 컴포넌트를 사용할 때?

를 사용할 수 있습니다.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> {}

을 추가하다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.
}

언급URL : https://stackoverflow.com/questions/44369706/react-typescript-usage-of-classname-prop