reactjs - I en React TS-komponent, hvordan sender jeg valgfrie props, der ikke er defineret i interfacet?

Jeg har følgende TS React-komponent (MyButton.tsx):

import React from 'react'

interface MyButtonProps {
  children: JSX.Element | JSX.Element[],
  className?: string,
  variant?: 'big-button' | 'medium-button' | 'small-button'
}

const MyButton = ({
  children,
  className,
  variant
}: MyButtonProps) => {
  let baseClassName: string = 'my-button'
  if (variant != null) {
    baseClassName += ' ' + variant
  }

  return (
    <button
      className={baseClassName + ' ' + className}
    >
      {children}
    </button>
  )
}

export default MyButton

Det er en ret enkel komponent at forstå. Jeg kan bruge den på følgende måde:

<MyButton variant='big-button'>Click Here</MyButton>

Det fungerer fint. Jeg vil dog helst kunne sende props til denne komponent, som ikke er defineret i interfacet for MyButtonProps. For eksempel vil jeg gerne kunne gøre noget som følgende:

<MyButton variant='small-button' type="reset" disabled>Reset Form</MyButton>

type og disabled props er normale HTML-attributter, men TS giver mig en fejl, fordi jeg ikke har defineret dem i interfacet. Hvordan kan jeg løse dette? Jeg kan huske at have set ...-operatoren til en lignende brugssag, men jeg kan ikke finde den mere. Enhver hjælp er meget værdsat!

Svar #1

Prøv dette:

interface MyButtonProps extends React.HTMLProps<HTMLButtonElement> {
  children: JSX.Element | JSX.Element[],
  className?: string,
  variant?: 'big-button' | 'medium-button' | 'small-button'
}

Try this:

 const MyButton = (
  children: JSX.Element | JSX.Element[],
  className?: string,
  variant?: 'big-button' | 'medium-button' | 'small-button',
  ...others: any[]
 )
const MyButton = ({
  children,
  className,
  variant,
  ...props
}: MyButtonProps) => {
  let baseClassName: string = 'my-button'
  if (variant != null) {
    baseClassName += ' ' + variant
  }

  return (
    <button
      className={baseClassName + ' ' + className}
      { ...props }
    >
      {children}
    </button>
  )
}

Svar #2

Prøv dette:

 const MyButton = (
  children: JSX.Element | JSX.Element[],
  className?: string,
  variant?: 'big-button' | 'medium-button' | 'small-button',
  ...others: any[]
 )

Så dette skulle fungere:

 const MyButton = (
  children: JSX.Element | JSX.Element[],
  className?: string,
  variant?: 'big-button' | 'medium-button' | 'small-button',
  ...others: any[]
 ) => {
  let baseClassName: string = 'my-button'
  if (variant != null) {
    baseClassName += ' ' + variant
  }

  return (
    <button {...others}
      className={baseClassName + ' ' + className}
    >
      {children}
    </button>
  )
}

export default MyButton

Nu kan du bruge de ekstra props ved blot at sprede dem i jsx-elementet som dette <button {...others}/>.

Eksempel :

<MyButton className="blah" disabled/>

Den ovenstående disabled vil blive anvendt på <button/> som følger:

<button disabled/>

Relaterede artikler