web-dev-qa-db-fra.com

Comment mettre à jour les accessoires des composants dans le livre d'histoires

J'utilise storybook ( this ) pour jouer avec mes composants de manière isolée. Je veux me moquer de tout le cycle de flux (que dans l'application complète cela se fait avec l'aide de redux) et mettre à jour une propriété en utilisant un objet simple dans l'histoire, mais il me manque quelque chose.

  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}
      />
    )
  }

J'attends le value prop de <ColorPicker /> à mettre à jour lorsque le onChange est appelé; Je peux voir la valeur de colorPickerState.color étant mis à jour correctement, mais le composant ne s'affiche pas de nouveau.

Qu'est-ce que je rate?

javascriptreactjsstorybook
14
ciaoben

Vous pouvez écrire un composant factice qui rendra le composant de l'histoire réelle à l'intérieur, puis vous aurez ce composant factice's state propriété.

Dans l'exemple ci-dessous, j'utilise addon de boutons dans un story d'un curseur composant

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

Vous pouvez utiliser un addon pour y parvenir: https://github.com/Sambego/storybook-state

Votre code ressemblerait donc à:

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