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必须静态可分析-即在执行代码之前已知，因此目前尚无动态命名导出的方法。不幸的是，您现在仍然使用旧语法。

故事书转换为CSF

1 个答案: