将故事书转换为CSF

Question

在将React Stories转换为使用建议的CSF的过程中

我想知道如何将以下内容(通过循环对象数组生成的故事)转换为CSF？

ps:我的真实数组有超过15个项目。这只是一个例子

const stories = storiesOf("MyStories", module)

const storyOptions = [{name: "foo", age:21}, {name: "bar", age: 22},{name: "batman", age: 23}, ] // 

for (let option of storyOptions) {
  stories.add(option.name, () => {
    return <MyWrapperComponent option={option} />
  })
}

我在重构上面的内容以输出与CSF相同的多个故事时遇到了困难:到目前为止，只有第一个故事返回：

export const myStories = () => {
  for (let option of storyOptions) {
    return <MyWrapperComponent option={option} />
  }
}

Answer 1

使用Storybook 5.x，这是我撰写本文时可用的最新版本，它不可能迭代数组并动态生成CSF格式的故事，因为拥有工作故事的要求很严格：-一个必需的缺省导出-一个或多个命名导出

默认导出一切正常，但是目前还没有办法动态命名导出，因为JS、import和export必须是可静态分析的-即在执行代码之前就知道了。不幸的是，您现在只能使用旧的语法。