使用Storybook参数设置嵌套参数

Question

所以我在故事书中有一个这样的故事：

export const One = Template.bind();
One.args = {
children: [
<MyComponent {...Icon.args} headerText={"Header"} />,
<MyComponent {...Standard.args}  />
]
};

说我得到的Standard.args是这样的：

Standard.args = {
headerText: "Default Header",
detailText: "Default details"
};

我希望能够使用不同的arg设置detailText值，但不知道如何做到这一点

export const One = Template.bind();
One.args = {
detailText: "new detail text",
children: [
<MyComponent {...Icon.args} headerText={"Header"} />,
<MyComponent {...Standard.args} detailText={detailText} />
]
};

这可能吗？

Answer 1

我使用了这个对我有效的解决方法。首先，我定义了嵌套内容：

const ContentOne = () => (<div>This is content one.</div>);
const ContentTwo = () => (<div>This is content two.</div>);

然后我为每个内容创建模板：

const TemplateOne = (args) => (
<YourComponent {...args}>
<ContentOne />    
</YourComponent>
)
const TemplateTwo = (args) => (
<YourComponent {...args}>
<ContentTwo />    
</YourComponent>
)

最后我导出组件：

export const ComponentOne = TemplateOne.bind({});
ComponentOne.args = {
detailText: "One detail text",
};
export const ComponentTwo = TemplateTwo.bind({});
ComponentTwo.args = {
detailText: "Two detail text",
};