React组件定义多个className的方法

• 问题背景

  • 有时需要对一个jsx中的元素定义多个类名，但是因为jsx不允许重复的属性，所以不能直接使用多个className。

• 解决方法

  • 使用字符串拼接

    import styles from './index.module.scss';
    interface PropsType{
      className: string;
    }
    const app: React.FC<PropsType> = () => {
      return (
        <>
        <div className = {styles.link + " " + className}></div>
        </>
      )
    }
    

  • 使用模版字符串

    import styles from './index.module.scss';
    interface PropsType{
      className: string;
    }
    const app: React.FC<PropsType> = () => {
      return (
        <>
        <div className = {`${styles.link} ${className}`}></div>
        </>
      )
    }