你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
ohuoyi

Storybook——React开发伴侣 0个回复 专栏 @ 工具

ohuoyi 发布于 4 月前

Storybook——React开发伴侣

React组件UI开发环境,其作用在于让前端工程师专注在样式,组件功能开发过程中。


安装初始化请按照 官方文档 指引进行,以下为我们开发中的一个片段

配置

// [Pro]/.storybook/config.js
import React from 'react';
import { configure } from '@kadira/storybook';
import 'normalize.css/normalize.css';

// 使用 material-ui 需配置
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
addDecorator((getStory) => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        {getStory()}
    </MuiThemeProvider>
))
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();


// 加载 *.css文件
const cssReq = require.context('../client/stylesheet', true, /.css$/);
// 加载 *.story.js文件
const viewReq = require.context('../imports/ui/pages/live', true, /.story.js$/);

function loadStories() {
    cssReq.keys().forEach((filename) => cssReq(filename));
    viewReq.keys().forEach((filename) => viewReq(filename));
}

configure(loadStories, module);

有时候,我们在开发时,还需要加载字体或者脚本,那么在上述文件同级的目录下增加如下文件即可:

// [Pro]/.storybook/config.html
<script src="xxxx"></script>

编写组件 story

配置完毕后,开始为每一个component编写story。我们推荐story文件以[componentName].story.js的文件命名,同时将story文件放在component的同级目录下。

以下为某一story文件:

//[Pro]/ui/component/bidOperator.story.js
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import BidOperator from './bidOperator.jsx';

storiesOf('view.LiveCar.comp.BidOperator', module)
    .add('可出价', () => (
        <BidOperator
            start={start}
            incRange={incRange}
            userCanBid={true}
            subBid={subBid}
        />
    ))
    .add('不可出价', () => (
        <BidOperator
            start={start}
            incRange={incRange}
            userCanBid={false}
            subBid={subBid}
        />
    ))
    ;
import Chance from 'chance';
const chance = new Chance();

const start = chance.floating({min: 2, max: 10, fixed: 0});
const incRange = chance.floating({min: 0, max: 1, fixed: 1});

const subBid = function(){
    console.log('subBid ');
}

启动

// 常用启动指令
start-storybook -p 9001 -c .storybook -s ./public

//-p 端口, -c 配置目录,-s 静态文件目录
//启动后 通过localhost:9001访问

如下是某组件的两种状态,通过属性(userCanBid)传递即可快速的测试出不同状态下的comp,下面看下效果图:

组件状态变换

(请注意中间有loading状态,其受组件内部state控制)

至此,我们完成了storybook基本工作,剩下的内容就是将开发重心放在component样式,组件功能中去。

以上仅为我们项目开发中的一个环节,除了上述内容外,实际中我们还需要编写接口文档,客户端渲染检测,浏览器兼容测试,这一系列的工作都需要有一套完整的开发环境,恰巧storybook满足了我们这个开发环节中的需求。这个工具非常有用!

使用storybook进行ui的开发,还存在一个重点问题,组件嵌套,关于这个一内容,将在下一节中重点讲述

更多资料

官方文档

时间选择器demo源码

等待第一条回复
登录后回复,如无账号,请使用邀请码注册