加入直播:美东时间周四上午 11 点,Storybook 9 发布与问答环节 (AMA)

组件依赖树

在 autodocs 页面通过交互式依赖树浏览各个 story。

在 Github 查看

Storybook Addon Dependencies

这个插件为 autodocs 页面添加了交互式依赖树。

Demo

Dependents Dependencies

开始使用

这个插件支持 v7 和 v8 版本。要在 Storybook 7 中使用它,请安装 npm i -D storybook-addon-dependencies@7.0.0

  1. 安装
npm i -D storybook-addon-dependencies
yarn add -D storybook-addon-dependencies
  1. 在 main.js 中注册插件
export default {
  addons: ["storybook-addon-dependencies"],
};
  1. 构建依赖树

  2. 运行 Storybook

开发脚本

要构建 storied 组件的依赖树,运行

npx storybook-addon-dependencies

区块

此插件会覆盖默认的文档页面,如果使用了自定义文档页面,请在模板中使用这些自定义文档区块。

import { Dependencies, Dependents } from "storybook-addon-dependencies/blocks";

钩子

要使用自定义文档区块创建自己的树设计,请使用钩子获取当前 story 标题,并使用 api 获取标题树。

import { useCurrentStoryTitle } from "storybook-addon-dependencies/hooks";

API

import { getTree, getDependenciesTree, getDependentsTree } from "storybook-addon-dependencies/api";

警告

  • 不要在同一个文件中编写多个 storied 组件。这可能会导致与树构建器冲突。