Story Links 插件

Storybook Links 插件可用于创建在 Storybook 中导航故事之间的链接。

框架支持

入门

通过添加 @storybook/addon-links 依赖项来安装此插件

yarn add -D @storybook/addon-links

在 .storybook/main.js 中

export default {
  addons: ['@storybook/addon-links'],
};

然后您可以在故事中导入 linkTo 并这样使用

import { linkTo } from '@storybook/addon-links';

export default {
  title: 'Button',
};

export const first = () => <button onClick={linkTo('Button', 'second')}>Go to "Second"</button>;
export const second = () => <button onClick={linkTo('Button', 'first')}>Go to "First"</button>;

查看 linkTo 函数

import { linkTo } from '@storybook/addon-links';

linkTo('Toggle', 'off');
linkTo(
  () => 'Toggle',
  () => 'off'
);
linkTo('Toggle'); // Links to the first story in the 'Toggle' kind

有了它，您可以将组件中的事件链接到 Storybook 中的任何故事。

• 第一个参数是故事类别名称 (您使用 title 命名)。
• 第二个 (可选) 参数是故事名称 (您使用 exported name 命名)。如果省略第二个参数，链接将指向给定类别中的第一个故事。

您也可以为以上任何参数传递一个函数。该函数接受由事件发出的参数，并且应返回一个字符串。

import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Select',
};

export const index = () => (
  <select value="Index" onChange={linkTo('Select', (e) => e.currentTarget.value)}>
    <option>index</option>
    <option>first</option>
    <option>second</option>
    <option>third</option>
  </select>
);
export const first = () => <LinkTo story="index">Go back</LinkTo>;
export const second = () => <LinkTo story="index">Go back</LinkTo>;
export const third = () => <LinkTo story="index">Go back</LinkTo>;

hrefTo 函数

如果您想获取特定故事的 URL，可以使用 hrefTo 函数。它返回一个 promise，该 promise 解析为一个包含相对 URL 的字符串。

import { hrefTo } from '@storybook/addon-links';
import { action } from 'storybook/actions';

export default {
  title: 'Href',
};

export const log = () => {
  hrefTo('Href', 'log').then(action('URL of this story'));

  return <span>See action logger</span>;
};

withLinks 装饰器

withLinks 装饰器提供了一种声明式定义故事链接的方法，使用 data 属性。这是一个 React 示例，但它适用于任何框架。

import { withLinks } from '@storybook/addon-links';

export default {
  title: 'Button',
  decorators: [withLinks],
};

export const first = () => (
  <button data-sb-kind="OtherKind" data-sb-story="otherStory">
    Go to "OtherStory"
  </button>
);

LinkTo 组件 (仅限 React)

使用 hrefTo 的一种可能方式是创建一个使用原生 a 元素但阻止纯左键单击时页面重新加载的组件，这样用户仍然可以使用默认的浏览器方法在新标签页中打开链接。这种组件的 React 实现可以从 @storybook/addon-links 包中导入。

import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Link',
};

export const first = () => <LinkTo story="second">Go to Second</LinkTo>;
export const second = () => <LinkTo story="first">Go to First</LinkTo>;

它接受 a 元素的所有 props，此外还有 story 和 kind。如果省略 kind prop，将保留当前的类别。

<LinkTo
  kind="Toggle"
  story="off"
  target="_blank"
  title="link to second story"
  style={{ color: '#1474f3' }}
>
  Go to Second
</LinkTo>

要为其他框架实现此类组件，您需要为原生 a 元素的 click 事件添加特殊处理。请参考 RoutedLink 源码。