Storybook——React开发伴侣

   <p>Storybook——React开发伴侣</p>    <p>React组件UI开发环境，其作用在于让前端工程师专注在样式，组件功能开发过程中。</p>    <p>安装初始化请按照 <a href="/misc/goto?guid=4959729895443928176" rel="nofollow,noindex">官方文档</a> 指引进行，以下为我们开发中的一个片段</p>    <h3>配置</h3>    <pre>  // [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);</pre>    <p>有时候，我们在开发时，还需要加载字体或者脚本，那么在上述文件同级的目录下增加如下文件即可：</p>    <pre>  // [Pro]/.storybook/config.html  <script src="xxxx"></script></pre>    <h3>编写组件 story</h3>    <p>配置完毕后，开始为每一个component编写story。我们推荐story文件以[componentName].story.js的文件命名，同时将story文件放在component的同级目录下。</p>    <p>以下为某一story文件：</p>    <pre>  //[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 ');  }</pre>    <h3>启动</h3>    <pre>  // 常用启动指令  start-storybook -p 9001 -c .storybook -s ./public    //-p 端口， -c 配置目录，-s 静态文件目录  //启动后 通过localhost:9001访问</pre>    <p>如下是某组件的两种状态，通过属性(userCanBid)传递即可快速的测试出不同状态下的comp，下面看下效果图：</p>    <p><img src="https://simg.open-open.com/show/472898659bcca7c363fc00dea54f58c6.gif"></p>    <p>(请注意中间有loading状态，其受组件内部state控制)</p>    <p>至此，我们完成了storybook基本工作，剩下的内容就是将开发重心放在component样式，组件功能中去。</p>    <p>以上仅为我们项目开发中的一个环节，除了上述内容外，实际中我们还需要编写接口文档，客户端渲染检测，浏览器兼容测试，这一系列的工作都需要有一套完整的开发环境，恰巧storybook满足了我们这个开发环节中的需求。这个工具非常有用！</p>    <p>使用storybook进行ui的开发，还存在一个重点问题， <strong>组件嵌套</strong> </p>    <p> </p>    <p> </p>    <p>来自：http://div.io/topic/1887</p>    <p> </p>