React基础（1）—— React.FC和为组件定义类名

weixin_41387874

已于 2022-04-07 23:08:10 修改

阅读量1.5w

点赞数 5

分类专栏： react 文章标签： react.js

于 2022-04-06 22:15:34 首次发布

本文链接：https://blog.csdn.net/weixin_41387874/article/details/124001885

版权

react 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了React.FC的含义，展示了如何在TypeScript中为函数式组件指定泛型props，并讲解了如何为自定义组件定义className。通过实例演示了如何使用PropsType接口和className在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。