故事书@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结束了安装它自己的插件依赖项并且 2 变得不同步。

如果是这种情况，您可能会在控制台中看到类似 "accessing nonexistent addons channel" 的错误。

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

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 是作为每个故事的一部分呈现的，所以你不能只在全局设置选项而不让每个故事应用这些设置.

故事书@storybook/addon-options 不起作用

storybook @storybook/addon-options dosent work

reactjs

storybook

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

之前对 Storybook v4 的回答：