当我们加载故事书插件时,我们可以传递一些选项:
// .storybook/main.js
module.exports = {
addons: [
'a-storybook-addon-without-options',
{
name: 'a-storybook-addon-with-options',
options: {
mainColor: 'hotpink',
},
},
],
};
为了编写我的插件,我使用 addon 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,
});
});
我不知道如何从插件代码中获取开发人员选项。有官方的方法吗?我没有从文档中得到明确的帮助。
我认为这里你应该在配置中使用参数而不是这个选项。
这种配置(选项字段)更适合改变 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>;
};
每个插件都有自己的选项方法,尽管有两种通常推荐的将选项传递给插件的方法:
preview.ts
中,您添加parameters: { myAddonKey: { ... } }
(Storybook插件中的许多示例)addons.setConfig
中的 manager.ts
(example)在某些情况下,
initialGlobals
中的preview.ts
可用于传递选项,尽管我相信这不是目前SB7和SB8维护者推荐的做法(示例)。
SB9 可能会引入新的插件配置方法(特别是针对管理器用例)。 https://storybook.js.org/docs/addons/writing-addons 是查看最新信息的地方。
当他们没有在参数上设置任何值时,您可以通过设置一个值来设置一些默认值,例如:
const mainColor = value ? value.mainColor : 'red';