web-dev-qa-db-ja.com

ストーリーブックでコンポーネントの小道具を更新する方法

私はstorybook（ this ）を使用して、コンポーネントを単独で再生しています。すべてのフラックスサイクルをモックし（完全なアプリでは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 />のonChangeプロパティが更新されることを期待しています。 colorPickerState.colorの値は正しく更新されていますが、コンポーネントは再レンダリングされません。

私は何が欠けていますか？

javascriptreactjsstorybook
14
ciaoben

dummy-componentを書くと、その中に実際のストーリーコンポーネントが表示され、そのdummy-componentのstateプロパティ。

以下の例では、Sliderコンポーネントのstoryで knobs addon を使用しています。

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} />
    }
);
6
vsync

アドオンを使用してこれを実現できます。 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>
  )
}
4
smurf