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

Posted 2023-02-19

【中文标题】如何使 React 故事书“插件链接”工作

【英文标题】：How to make React storybook 'addon-links' work

【发布时间】：2020-06-23 12:20:21

【问题描述】：

我正在尝试使用插件链接。我尝试了文档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>
);

【问题讨论】：

请在您的问题中包含相关代码sn-p，即您调用linkTo的整个渲染函数？

@Tyblitz 添加了代码。如果我使用 LinkTo react 组件，它可以正常工作，但 linkTo 函数会抛出上述错误“无法导航到提供的故事”

我遇到了同样的问题，使用 addon-links repo 中提供的示例。你有没有得到这个工作？

我创建了一个 github 问题：github.com/storybookjs/storybook/issues/10546

@Aaron 我通过将故事放在不同的文件中来让它工作。

【参考方案1】：

命名有一个棘手的部分。如果您为您的故事提供 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>