组件封装规范

组件封装原则

不能将具体项目中的环境变量引入到组件中，保持组件的独立性
一个组件文件夹包括但不仅限于 4 类文件：index.tsx、typing.d.tsx、styles.less、index.md(一般放在\docs\components)
样式名、类型名和组件命名一定要独立，不能重复！！！
注释规则：
- 组件的每个参数需要有注释
- 参数类型和函数采用 jsdoc 注释/** */，以便调用者能在调用的时候看到 API 的作用
css 规则：
- 不使用 css Modules，因为采用 css Modules 方式导入，会导致 className 不稳定，开发者无法覆写
- 采用 improt '\*.less'或者css-in-js导入样式
- css 类名规则 lands-组件名-类名
TS 类型规则：
- 组件的 Props 命名，采用 组件名Props,例如：ProTableEditProps
- 组件的衍生 Props 命名，采用 组件名-变量名,例如：ProTableEditColumns
- 简单类型使用 type 结尾命名。例如：export type stringNumberType = string | number
- 复杂对象类型使用 props 结尾命名。例如：export interface ProTableEditProps{ } or type ProFormTableProps = Record<string,any> & { ... }
- 组件相关类型首字符全部大写，驼峰命名
- 局部不需要导出的类型，可自定规则。例如：组件的 Props(不导出)，可使用 interface IProps{} 定义

透传 className、style

我们可以给组件设置 className 和 style：

tsx

import './App.css';
import { Button } from 'antd';

function App() {
	return (
		<div className="App">
			<Button className="aaa bbb" style={{
				width: '100px',
				height: '50px'
			}} type="primary">测试</Button>
		</div>
	);
}

export default App;

这种功能的实现就是透传 className 和 style 的 props。

基本 antd 所有的组件都会做这个。

比如 VisualList 组件的源码：它取了传入的 className、style 的 props，还有剩余的所有 props。

对 className 做了一些处理，添加了两个 className：

对 style 也做了扩展，添加了个 position: relative 的样式。

然后把 style、className，额外的 props 都设置给最外层的 div。

这样，使用这个组件的时候，就可以自己定义一些样式，设置一些 props。

其中，classnames 是用来动态产生 className 的一个包，用起来很简单。

Contributors

作者:Long Mo

字数统计:552 字

阅读时长:1 分钟

Long Mo

文章作者：Long Mo

组件封装规范 ​

组件封装原则 ​

透传 className、style ​

Contributors ​

组件封装规范

组件封装原则

透传 className、style

Contributors