3

当我们加载一个故事书插件时，我们可以传递一些选项：

// .storybook/main.js

module.exports = {
  addons: [
    'a-storybook-addon-without-options',
    {
      name: 'a-storybook-addon-with-options',
      options: {
        mainColor: 'hotpink',
      },
    },
  ],
};

要编写我的插件，我使用插件 API：

// /a-storybook-addon-with-options/src/register.js

import React from 'react';
import { addons, types } from '@storybook/addons';
import MyComponent from './myComponent.js';

const ADDON_ID = 'myaddon';
const PANEL_ID = `${ADDON_ID}/panel`;

addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',
    render: MyComponent,
  });
});

我不知道如何从插件代码中获取开发人员选项。有官方方法吗？我没有从文档中得到明确的帮助。

4

2 回答 2

0

当他们没有在参数上设置任何值时，您可以通过设置一个值来设置一些默认值，例如：

const mainColor = value ? value.mainColor : 'red';
于 2022-02-28T13:56:26.293 回答
0

我认为在这里您应该在配置中使用参数而不是此选项。

这种配置（选项字段）更多地用于改变 webpack 或 babel 配置的预设。

如果您使用您在注册文件中指定的密钥在预览中添加一个参数，那么您可以轻松地在插件代码中访问该参数。

在 preview.js

export const parameters = {
  myAddon: {
    mainColor: 'red'
  },
};

在插件代码中

import { useParameter } from '@storybook/api';

const PARAM_KEY = 'myAddon';

const MyPanel = () => {
  const value = useParameter(PARAM_KEY, null);
  const mainColor = value ? value.mainColor : 'No mainColor defined';
  return <div>{mainColor}</div>;
};
于 2022-02-24T12:08:36.070 回答