reactjs - React + TypeScript användning av className-prop

Vad är det korrekta sättet att skriva och använda className-propsen i en anpassad komponent? Jag kunde tidigare göra så här:

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

och sedan använda min komponent via:

<MyComponent className="my-class" />

Observera att jag inte skulle definiera className i MyProps, även om React tidigare var typat för att stödja denna användning.

Nu ser jag detta typerrorsmeddelande:

Property 'className' does not exist on type 'IntrinsicAttributes & 
IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ 
childr...'

Vad är det korrekta sättet att definiera/typa min komponent som gör att jag kan använda className när jag använder min komponent?

Svar #1

Du kan använda typen HTMLAttributes, till exempel:

class MyComponent extends React.Component<MyProps & React.HTMLAttributes<HTMLDivElement>, {}> {
    render() {
        return <div className={ this.props.className }>My Div</div>
    }
}

På så sätt kan du skicka vidare vilken som helst av de egenskaper som ett HTML-element kan behöva.

Om du bara behöver className-egenskapen kan du göra så här:

class MyComponent extends React.Component<MyProps & { className: string }, {}> {
    render() {
        return <div className={ this.props.className }>My Div</div>
    }
}

Eller lägg helt enkelt till det i din MyProps-typ.

Svar #2

För någon som letar efter en lösning för funktionella komponenter, som jag gjorde.

type Props = {
  className?: string
}

const MyComponent: React.FC<Props> = (props) => (
  <div className={props.className}>{props.children}</div>
)

export default MyComponent

eller om du vill deklarera gränssnittet separat:

interface OnlyClassNameInterface extends React.FC<{className: string}> {}

const MyComponent: OnlyClassNameInterface = (props) => (
  <div className={props.className}>{props.children}</div>
)

export default MyComponent

och du kan flytta gränssnittet till en annan fil

import React from 'react'

type MixProps<P> = P & {className?: string}

export interface OnlyClassNameInterface<P = {}> extends React.FC<MixProps<P> {}

Svar #3

Jag själv använder alltid typen HTMLProps genom att få className från den på detta sätt:

HTMLProps<HTMLElement>["className"];

Det fungerar också helt problemfritt med TailwindCSS klassnamn autofullständig funktionalitet.

Relaterade artiklar