javascript 如何更新故事书中的组件道具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45918350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update components props in storybook
提问by ciaoben
I am using storybook(this) to play with my components in isolation. I want to mock all the flux cycle (that in the full app it is done with the help of redux) and update a property using a simple object in the story, but I am missing something.
我正在使用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}
/>
)
}
I expect the valueprop of <ColorPicker />to be updated when the onChangeis called; I can see the value of colorPickerState.colorbeing updated correctly, but the component does not re-render.
我希望在调用时更新value道具；我可以看到正确更新的值，但组件不会重新渲染。<ColorPicker />onChangecolorPickerState.color
What am I missing?
我错过了什么？
回答by vsync
You can write a dummy-componentwhich will render the real storycomponent inside it, and then you get to have that dummy-component's stateproperty.
您可以编写一个dummy-component 来在其中渲染真实的故事组件，然后您就可以拥有该dummy-component的state属性。
In the below example I'm using knobs addonin a storyof a Slidercomponent
在下面的示例中，我在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} />
}
);
回答by smurf
You can use an addon to achieve this: https://github.com/Sambego/storybook-state
您可以使用插件来实现此目的：https: //github.com/Sambego/storybook-state
So your code would look like:
所以你的代码看起来像：
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>
)
}
