Как заставить React Storybook 'addon-links' работать

Question

Я пытаюсь использовать дополнительные ссылки. Я попробовал точный пример простой кнопки, указанный в документации https://www.npmjs.com/package/@storybook/addon-links. Компонент LinkTo react работает нормально, но когда я использую функцию 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>
);

Answer 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>