携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情
react 组件库开发：
准备工作：创建基础包
创建React项目
npx create-react-app myapp --typescript
安装依赖，支持typescript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
创建支持ts的组件库；
- 修改目录结构： 删除public； 删除不用的js文件； 修改index.js为tsx
src components目录结构
-
创建tsconfig.build.json 配置输入输出文件位置，exclude文件
-
script修改打包命令根据build包大包输出：
tsc -p tsconfig.build.json
- 以上就创建好一个基础组件库了，pack/lint本地调试
link (本地调试参考)[docs.npmjs.com/cli/v6/comm…]
React组件库的其他高级配置
-
storybook配置和调试
-
Monorepo分包管理
-
eslint检查
-
单元测试
-
按需加载
-
stroybook文档
# 加入 Storybook:
npx -p @storybook/cli getstorybook
# yarn 加载
yarn run storybook
自定义标题
通过自定义创建theme的形式更新主题、icon等（不知道为什么主题不生效）
React踩坑记录
-
组件命名首字母大写
-
useEffect
-
window调用报错：
解决方法：my.oschina.net/tearlight/b…
- 插槽子组件的形式
{
React.Children.map(children, (child, index) => {
return <li>
{
React.cloneElement(child, {
index: index,
})
}
</li>
})}
- ts默认值：
children 返回值 undefined 只有一个就是对象；多个就是数组；直接map循环就要判断类型，用React.children就不用判断类型了
interface Options{
title?:
}
const initProps = {
title: '默认标题' ,
}
let { title } = Object.assign(initProps,props)
同设置windows一样，需要设置全局index.d.ts
- react中set的值立马去拿拿不到
