如何更新故事書中的組件道具

Question

我正在使用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} 
     /> 
    ) 
    } 

我期待的<ColorPicker />的value道具時onChange被稱爲進行更新;我可以看到colorPickerState.color的值正確更新，但組件不會重新呈現。

我錯過了什麼？

Answer 1

您可以使用插件來實現這一目標：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> 
) 
}