Question

我正在尝试使我的ui-components故事和代码在层次结构上匹配。例如，如果我添加另一个子按钮组件，则希望它反映在故事书的Buttons下。每个组件都有一个独立的故事，并被像这样导入到一个故事（stories/index.stories.js）中：

const req = require.context("../ui-components", true, /.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

这是我的文件夹结构

- ui-components
-- Button
--- Nested_Button
---- index.js
---- stories.js
-- index.js
-- stories.js
....
- stories
-- index.stories.js

故事名称将使用斜线嵌套，那么有什么办法可以编写这样的组件故事？

const ButtonStories = storiesOf(`${THIS_MODULE_PATH_RELATIVE_TO_UI_COMPONENTS_DIR}`, module).add(
  "A basic button",
  () => <Button>Basic Button</Button>
);

Answer 1

我最终要做的是在组件故事中使用__dirname变量作为故事名称。

由于Storybook使用默认配置，因此此操作无法正常工作，因此我添加了自定义var x以获取正确的路径。

webpack.config.js

故事书的相对路径故事

1 个答案: