Skip to content

Latest commit

 

History

History
49 lines (29 loc) · 1.24 KB

README.md

File metadata and controls

49 lines (29 loc) · 1.24 KB
Raw

ReactStorybook

前提条件

  • 已经运行CRA，拥有初始项目，并能正确创建ts文件和运行。
  • 参考地址：https://storybook.js.org/docs/react/get-started/install
  • npx sb init
  • yarn storybook/npm run storybook

Antd

以Antd组件作为参考组件进行模拟，在src文件夹下创建单个组件文件夹，在文件夹内完成[name].stories.tsx的定义。

[name].type.ts用于扩展Antd组件Props

hygen

如果需要编辑多个Antd组件，借助hygen实现

参考文档：http://www.hygen.io/docs/quick-start

npm i -g hygen

hygen init self

hygen generator new [name]

package.json中增加scripts命令"newComponent": "hygen [name] new"

运行npm run newComponent执行脚本

模板内容参考：

---
to: src/<%= name %>/<%= h.changeCase.camelCase(name) %>.type.ts
force: true
---

import { customProps } from "../type";
import { <%= name %>Props as Antd<%= name %>Props } from "antd";

export type <%= name %>Props = customProps<Antd<%= name %>Props, {}>;

npm run newComponent适用于元素较少的情况，可以依次创建元素，如果需要创建的元素较多，可以通过脚本批量执行。