React-story-book的使用

最新推荐文章于 2024-09-14 07:47:01 发布

代罔

最新推荐文章于 2024-09-14 07:47:01 发布

阅读量924

点赞数 3

文章标签： react 自动生成文档使用addon-info问题 addon-info没有边框线 StoryBook-React

本文链接：https://blog.csdn.net/qq_41523392/article/details/118529931

版权

本文档介绍了如何使用React Story Book解决组件库管理痛点，包括其特点、安装、启动、编写案例、TypeScript支持、文档生成、样式引入、插件系统、InfoAddon的使用以及属性表格的完善。通过Story Book，你可以方便地展示组件的不同状态，进行行为追踪和属性调试，自动生成组件文档。同时，文章还提供了关于Info addon的详细配置方法，以及如何处理缺少边框线的问题。

摘要由CSDN通过智能技术生成

项目地址传送门Github

项目中的痛点

create-react-app入口文件不适合管理组件库，更加适合页面开发
缺少行为追踪个和属性调试功能

story-book的特点

分开展示各个组价不同属性下的状态
能追踪组件的行为并且具有属性调试功能
可以为组件自动生成文档和属性列表
适用React、Vue、Angular

一、安装story-book

npx -p @storybook/cli sb init
or
npx sb init
版本为6.3.2

二、启动story-book

yarn storybook or npm run storybook

三、写一个自己的case

import React from 'react'
import {
    storiesOf } from '@storybook/react'
import {
    action } from '@storybook/addon-actions'

import Button from './button'

const defaultButton = () => (
 <Button onClick={
   action('clicked')}> default button </Button>
)
storiesOf('Button Component', module)
 .add('Button', defaultButton)

四、typeScript的支持

官方文档中有typeScript Config
当前版本6.3支持typeScript，所以不用配置，下面关于TS的配置都不用做
兼容不支持的版本ex:5
- 在.storybook文件夹下新建webpack.config.js
- 在.story/webpack.config.js中添加如下👇Code：

module.exports = ({
         config }) => {
       
config.module.rules.push({
       
test: /\.tsx?$/,
use: [
  {
       
    loader: require.resolve("babel-loader"),
    options: {
       
      presets: [require.resolve("babel-preset-react-app")]
    }
  },
  // 自动生成文档的
  require.resolve("react-docgen-typescript-loader")
]
})<