故事书@ storybook / addon-options重要工作

Question

我正在尝试设置一些选项，但是它不起作用。

package.json

  "devDependencies": {
    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/addon-options": "^3.4.11",
    "@storybook/addon-storyshots": "^3.4.10",
    "@storybook/addons": "^3.4.10",
    "@storybook/react": "^3.4.11"
}

addons.js

import '@storybook/addon-options/register';

config.js

import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';

setOptions({ name: 'my name' });

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

我试图了解我的位置，几个小时后出了问题。

Answer 1

使用提供的版本进行测试后编辑：

我使用上述版本在本地进行了测试，其外观是因为@storybook/react和@storybook/addons的版本不同，即使有补丁，@storybook/react最终也安装了自己的插件依赖关系，两个插件不同步。

在这种情况下，您可能会在控制台中看到类似“访问不存在的插件频道”的错误。

要解决此问题，您需要将插件依赖项的版本提高到v3.4.11并重新安装react依赖项。

npm install --save-dev @storybook/addons@3.4.11 @storybook/react@3.4.11

注意：如果仅将插件更新到v3.4.11，而不重新安装react依赖项，它将无法完全同步，因为react已经安装了它自己的插件依赖项。

node_modules内的文件系统映像：

以前针对Storybook v4的回答：

根据文档，您必须将设置用作装饰器（并且没有setOptions函数，但是有withOptions函数）。

所以尝试一下：

import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

addDecorator(withOptions({ name: 'my name' }));

// rest of the config goes here

此外，请确保通过在addons.js文件中添加以下行来注册插件：

import '@storybook/addon-options/register';

参考：https://www.npmjs.com/package/@storybook/addon-options

此外：之所以必须将其放置在装饰器中，是因为故事书的UI呈现为每个故事的一部分，因此，您不能仅在全局设置选项而不让每个故事都应用这些设置。