错误：意外的 `storiesOf` 用法：C:/Users/imran/react-package/src/stories/Requirements.stories.js（第 6 行，第 16 栏）

Question

无法索引 ./src/stories/Requirements.stories.js：

错误：意外storiesOf用法：C:/Users/imran/react-package/src/stories/Requirements.stories.js（第 6 行，第 16 栏）。

在SB7中，我们默认使用下一代storyStoreV7，它不支持storiesOf. 更多信息，以及有关如何选择退出的详细信息，请参见此处：

import React from "react";
import { storiesOf } from "@storybook/react";

import { Requirements } from "../components/Requirements";

const stories = storiesOf('App Test', module);

stories.add('App', () => {
    return (<Requirements />)
});

Answer 1

您看到的错误消息与 的使用有关storiesOf，下一代 .Storybook 7 不支持该用法storyStoreV7。Storybook 7 对故事的定义和管理方式进行了一些更改，并且不再使用storiesOf. 相反，它鼓励使用新语法来定义故事。

要解决此问题并更新您的故事以使用 Storybook 7，您应该使用新语法重构您的故事定义。以下是如何更新代码的示例：

// Import your component
import React from 'react';
import { ComponentName } from '../components/Assistant';

// Export a default export named 'default' (if applicable)
export default {
  title: 'Assistant', // Define the title for your stories
  component: ComponentName, // Specify the component being used in the stories
};

// Define your stories using the 'args' pattern
export const App = (args) => <ComponentName {...args} />;

// Optionally, provide default values for your component props
App.args = {
  // Define your component's props here
};

您需要执行以下操作：

1. 导入您的组件。
2. 导出一个默认对象，其中包括title（故事书标题）、component（正在使用的组件）和您的个人故事定义。
3. 使用模式定义您的故事args，其中args可用于为组件道具提供默认值。

替换ComponentName为组件的实际名称。

此更新的代码与 Storybook 7 中定义故事的新方法保持一致。请确保将此模式应用于您的所有故事，它应该可以解决您面临的问题。