时间戳

首页 > 解决方案 > 如何使 React 故事书“插件链接”工作

reactjs - 如何使 React 故事书“插件链接”工作

问题描述

我正在尝试使用插件链接。我尝试了文档中列出的确切简单按钮示例，https://www.npmjs.com/package/@storybook/addon-links。LinkTo 反应组件工作正常，但是当我使用 linkTo 功能时，我得到“无法导航到提供的故事”错误。有人可以帮我吗？

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

export default {
  title: 'Button',
};

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

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

标签： reactjsstorybookstorybook-addon-specifications

解决方案

命名有一个棘手的部分。如果你为你的故事提供了一个storyName（从 Storybook 6.0 开始；以前是story.name），那么你应该将它作为第二个参数传递给linkTo函数调用。请参阅下面更复杂的示例：

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

export default {
  title: 'Specs - v1/Button',
};

export const firstStory = () => (
  <button onClick={linkTo('Specs - v1/Button', 'Second story name')}>
    Go to "Second"
  </button>

);

export const second = () => (
  <button onClick={linkTo('Specs - v1/Button', 'firstStory')}>
    Go to "First"
  </button>
);
second.storyName = 'Second story name';

还要注意'linkTo'调用返回一个新函数。所以你不应该像例子中那样用匿名函数包装它：

// Wrong
<button onClick={() => linkTo('Button', 'second')}>
  Go to "Second"
</button>

// Correct
<button onClick={linkTo('Button', 'second')}>
  Go to "Second"
</button>

推荐阅读