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 命名的名称）。
• 第二个（可选）参数是故事名称（您使用 导出名称 命名的名称）。如果省略第二个参数，则链接将指向给定类别中的第一个故事。

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

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 { action } from '@storybook/addon-actions';
import { hrefTo } from '@storybook/addon-links';

export default {
  title: 'Href',
};

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

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

withLinks 装饰器

withLinks 装饰器使用数据属性提供了一种声明性方式来定义故事链接。这是一个 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 元素的所有道具，以及 story 和 kind。如果省略了 kind 道具，则将保留当前类别。

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

要为另一个框架实现此类组件，您需要为原生 a 元素上的 click 事件添加特殊处理。有关参考，请参阅 RoutedLink 源代码。