storybook - 指定故事书的默认页面

Question

我的React应用程序中有故事书，由于某种原因，当我运行yarn storybook时，它总是打开相同的故事(它会自动选择selectedKind和selectedStory)。如何手动选择默认故事？

Answer 1

根据网址查询参数选择种类和故事(即http://localhost:9001/?selectedKind=Component&selectedStory=default将选择Component种类和default故事)。如果没有任何URL参数，则故事书将选择列表中的第一个故事(这是通过配置的故事书加载的第一个故事)。

如果您只想选择列表中的第一个故事，则以特定顺序将故事文件加载到loadStories文件中的.storybook/config.js函数中。

但是，如果您要始终选择相同的故事，请按照以下说明进行操作。

最好的方法是使用Storybook的addonAPI。
这是一个对我有用的示例(带有保护措施，这样您就不会永远陷入同一故事):

// .storybook/addons.js
import addonAPI from '@storybook/addons';

let firstLoad = true;
addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
  storybookAPI.onStory((kind, story) => {
    // when you enter a story, if you are just loading storybook up, default to a specific kind/story. 
    if (firstLoad) {
      firstLoad = false; // make sure to set this flag to false, otherwise you will never be able to look at another story.
      storybookAPI.selectStory('FirstKind', 'default story');
    }
  });
});

使用该代码段，无论您根据URL最终基于哪个故事，都可以选择第一个故事。

您可以在此处阅读有关故事书addonAPI的更多信息: https://storybook.js.org/addons/api/
我可能会允许在URL中使用其他查询参数来强制选择URL中的kind + story。

注意:可能已有一个提供此功能的插件，但是快速搜索未找到可行的结果。