reactjs - Ako spraviť react-typescript className na pole

Takže povedzme, že mám komponent s jedinou referenciou na štýly, funguje to dobre

export const something = () => {
  return (
    <div className={styles.myStyle}
  )
}:

Ale povedzme, že chcem mať odkaz s viacerými štýlmi ako

export const something = () => {
  return (
    <div className={[styles.myStyle, styles.myOtherStyle]}
  )
}:

Typescript vyhodí error a hovorí:

Očakávaný typ pochádza z vlastnosti 'className', ktorá je deklarovaná tu na type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly> & Readonly<{ children?: ReactNode; }>'

Ako by som zmenil typ className na pole, aby mohol prijímať formát, ktorý chcem?

Odpoveď č. 1

Typ className je String a vy odovzdávate typ Array<String>

className={[styles.myStyle, styles.myOtherStyle]}

Ktoré nie je priraditeľné.

Takže buď musíte túto polia previesť na reťazec pomocou join() alebo concatenation, alebo použiť knižnicu classnames

  • [styles.myStyle, styles.myOtherStyle].join(' ')
  • {styles.myStyle + ' ' + styles.myOtherStyle}
  • $ {styles.myStyle}$ {styles.myOtherStyle}

použitie knižnice classnames

import * as classnames from 'classnames'
className={classnames(styles.myStyle, styles.myOtherStyle)}

Odpoveď č. 2

className={[styles.myStyle, styles.myOtherStyle, "otherClass"].join(' ')}

className={`${styles.foo} ${styles.bar}`}

Súvisiace články