Storybook State

该项目不再维护。推荐的替代方案是 React 16+ 中的 useState hook。

一个 Storybook 扩展，用于管理无状态组件的状态。这使得为无状态组件编写 stories 变得更容易。

入门

添加 @dump247/storybook

npm install --save-dev @dump247/storybook-state

在 addons.js 中注册扩展。

import '@dump247/storybook-state/register';

创建 Story

使用该扩展创建 story。

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withState } from '@dump247/storybook-state';

storiesOf('Checkbox', module).add(
  'with check',
  withState({ checked: false })(({ store }) => (
    <Checkbox
      {...store.state}
      label="Test Checkbox"
      onChange={(checked) => store.set({ checked })}
    />
  )),
);

扩展

withState(initialState)(storyFn)

initialState 是组件的初始状态。这是一个对象，其中每个键是要设置的状态值。

storyFn 是生成 story 组件的函数。此函数接收 story 上下文对象 { store: Store } 作为参数。

此扩展可以与其他 Storybook 扩展函数组合使用

withState({ initialState: '' })(
  withInfo(`Some cool info`)(
    ({ store }) => <MyComponent {...store.state} />
  )
)

Store API

store.state

包含当前状态的对象。

store.set(state)

设置给定的状态键。state 参数是一个包含要设置的键和值的对象。

这只会设置/覆盖提供的特定键。

store.reset()

将 store 重置为初始状态。

面板

该项目包含一个 Storybook 面板，用于显示当前状态并允许重置状态。