如何在故事书中更新组件道具

Question

我正在使用storybook(这个)单独使用我的组件.我想模拟所有的通量循环(在完整的应用程序中它是在帮助下完成的redux)并使用故事中的简单对象更新属性,但我遗漏了一些东西.

  storiesOf('Color picker', module).add('base', () => {
    let colorPickerState = {
      changeColor: function(data) {
        this.color = data.color
      },
      color: '#00aced'
    }
    return (
      <ColorPicker
        name="color"
        onChange={colorPickerState.changeColor.bind(colorPickerState)}
        value={colorPickerState.color}
      />
    )
  }

我希望在被召唤时更新value道具; 我可以看到正确更新的值,但组件不会重新渲染.<ColorPicker />onChangecolorPickerState.color

我错过了什么？

Answer 1

您可以编写一个虚拟组件，该组件将在其中渲染真实故事组件，然后获得该虚拟组件的state属性。

在下面的示例中，我在Slider组件的故事中使用了旋钮插件

stories.addDecorator(withKnobs)
    .add('Slider', () => {
        // create dummy component that wraps the Slider and allows state:
        class StoryComp extends React.Component {
            constructor( props ){
                super(props);

                this.state = {
                    value : this.props.value || 0,
                }
            }

            onValueChange = value => this.setState({ value })

            render(){
                const props = {
                    ...this.props, 
                    onValueChange:this.onValueChange, // <--- Reason "StoryComp" is needed
                    value:this.state.value            // <--- Reason "StoryComp" is needed
                }

                return <Slider {...props} />
            }
        };

        // knobs (customaziable props)
        const widthKnobOptions = {
            range  : true,
            min    : 200,
            max    : 1500,
            step   : 1
        }

        const props = {
            value       : number('value', 200000),
            min         : number('min', 100),
            step        : number('step', 1000),
            max         : number('max', 1000000),
            width       : number('width', 700, widthKnobOptions)
        };

        return <StoryComp {...props} />
    }
);

Answer 2

您可以使用插件来实现此目的：https : //github.com/Sambego/storybook-state

所以你的代码看起来像：

import { State, Store } from '@sambego/storybook-state';

const store = new Store({
  value: '#00aced',
});

storiesOf('Color picker', module).add('base', () => {
  return (
    <State store={store}>
      <ColorPicker
        name="color"
        onChange={(data) => store.set({ value: data.color })}
      />
    </State>
  )
}