React.FC

• TS泛型

  • TS泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的特性。

• React.FC

  • React.FC表示函数式组件，是在TypeScript中使用的一个泛型。

• 为React.FC传入props

  • 一个例子

    interface PropsType{
      msg?: string;
    }
    const app: React.FC<PropsType> = ({msg}) => { //{msg}相当于解构赋值，从props中解构
      return(
        <h1>hello,{msg}</h1>
      )
    }
    

    想要使用props，必须为React.FC提供泛型定义。

• 为自定义组件定义className

  • className

    • className相当HTML中的class，由于React书写的是tsx，是类js的语法，所以会受到js语法的约束，所以不能直接使用class关键字，只能使用className关键字定义css类名。

  • 一个例子

    .subClass{
      ...
    }
    .classA{
      ...
    }
    

    上面是父组件对应的css module，采用下面的方法，可以使我们可以在父组件的css module中定义子组件的样式。就像操作普通DOM元素一样。（普通DOM元素直接定义className就可以在父组件的css module中定义样式）。

    import subComponent from '...';
    import styles from './index.module.scss';
    
    const parentComponent: React.FC = () => {
      return(
        <>
        	<subComponent className={styles.subClass} />
        	<div className={styles.classA}></div>
        </>
      )
    }
    

    上面是父组件中的内容，实际上className将会作为props传给subComponent。

    const subComponent: React.FC<{className: string}> = ({className}) => {
      return(
        <div className={className}>
          ...
        </div>
      )
    }
    

    注意为子组件定义className，传入的className应该赋值给根元素的className。