Storybook StoryRouter 故事被标记为必填

Posted 2023-02-19

【中文标题】Storybook StoryRouter 故事被标记为必填

【英文标题】：Storybook StoryRouter story is marked as required

【发布时间】：2020-01-29 03:26:58

【问题描述】：

我正在将 React 与 Storybook 一起使用。我的一个组件使用 Link 并且反应需要任何 Link 组件都应该包装在 Router 中，这就是我使用 npm 模块StoryRouter 的原因。一切正常，但我在控制台上收到一个警报。

// simple ListItem.tsx
import React from 'react';
import  Link  from 'react-router-dom';
export const ListItem = () => 
    return (
        <Link to=pathname:`/page/1`>
            go to page
        </Link>
    );


// ListItem.stories.tsx
import * as React from 'react';
import  storiesOf  from '@storybook/react';
import StoryRouter from 'storybook-react-router';
import  ListItem  from "./ListItem";
let props = 
    text:"Introduction to limits",

storiesOf("ListItem", module)
    .addDecorator(StoryRouter()) // this causes the alert
    .add("default", () => <ListItem ...props />)

当我在 getStorybook 上查看组件时，控制台上有一条消息

    Warning: Failed prop type: The prop `story` is marked as required in `StoryRouter`, but its value is `undefined`.
        in StoryRouter (created by storyFn)
        in storyFn
        in ErrorBoundar

【参考方案1】：

将 storybook-react-router 升级到 1.0.8。此错误已修复。见：https://github.com/gvaldambrini/storybook-router/issues/43