起因
最近公司业务不是那么多，就抽空写了下组件库的东西，然后看了很多组件库的源码，由于我这里封装的主要是 taro 移动端的组件，所以主要是参考了 antd- , react-vant, tard 等组件库 。
然后根据他们的源码，整合出一套自己比较喜欢的组件封装写法，分享给大家 。
文末附上组件快捷代码片段
例：封装一个计数器组件 样式
react 中没有像 vue 那样的 scope，首先一个组件需要防止类名和其他的重复 。
定义一个类名前缀 这里可以统一命名一个自己喜欢的开头，我这里就叫 com 了
【一React 封装组件的一些心得】const classPrefix = `com-count`;
html 中可以这样使用，的详细描述放后面了（可先忽略）
return withNativeProps(ret,
在 index.less 文件中
// @import '@/style/index.less'; // 这里可以引入全局的一些样式@class-prefix: ~'com-count';.@{class-prefix} {width: 100px;background-color: #f2f2f2;&-title {font-weight: bold;}&-count {color: skyblue;}}
props
生成组件的 props 类型，类型的详细描述放后面了（可先忽略）
export type CountProps = { count: numbertitle?: string} & NativeProps
定义组件的默认值
const defaultProps = {title: '计数器',}type RequireType = keyof typeof defaultProps
props 的使用，就是用来合并 props 默认值的，详细描述放后面了
const Count = (comProps: CountProps) => {const props = useMergeProps
完整案例使用
import { useState } from "react";import Count from ".."export default () => {const [count, setCount] = useState(0);return (
import React, { useState, useEffect } from 'react';import './index.less';import { NativeProps, withNativeProps } from '@/utils/native-props';import useMergeProps from '@/hooks/use-merge-props';const classPrefix = `com-count`;// 组件 propsexport type CountProps = { count: numbertitle?: string} & NativeProps// props 默认值const defaultProps = {title: '计数器',count: 0,}type RequireType = keyof typeof defaultPropsconst Count = (comProps: CountProps) => {// 合并 propsconst props = useMergeProps
utils 和 hooks 等的引入方式和
该方法的从 antd 组件库的源码中借鉴过来使用的 。
import React from 'react';import type { CSSProperties, ReactElement } from 'react';import classNames from 'classnames';// style 和 className 的类型，根据需要可以加其他东西，如 onClick 等export type NativeProps = {className?: string;style?: CSSProperties & Partial
{title}
){c}
{title}}
{title}
)}export default Count{c}