StorybookJS 中的模拟 useState

Question

我想知道，在故事书中模拟 React 状态的“最佳实践”是什么（例如 *.stories.js）。

目前我正在尝试实现深色主题切换。

1. App Component 有一个名为“darkState”的状态，可以设置 true/false
2. 应用程序组件有一个处理程序“handleThemeChange()”，它根据“darkState”更改 MUI 主题
3. 标题组件有一个带有“onChange()”的开关或按钮，它会触发应用程序组件中的“handleThemeChange()”
4. MUI Switch 需要一个状态才能正常工作（至少我猜是这样）

所以，我决定在我的故事文件中模拟这个状态。但是在装饰器中写这个似乎......很奇怪。你怎么解决这个问题？

/components/Header/Header.stories.js

import React, { useState } from "react";
import { Header } from "./Header";

export default {
  title: "Components/Header",
  component: Header,
  decorators: [
    (StoryFn) => {
      // mock state
      const [darkState, setDarkState] = useState(false);
      const handleThemeChange = () => {
        setDarkState(!darkState);
        return darkState;
      };

      return (
        <Header
          enableThemeChange={true}
          handleThemeChange={handleThemeChange}
          darkState={darkState}
        />
      );
    }
  ]
};

const Template = (args) => <Header {...args} />;
export const Default = Template.bind({});

// define Controls
Default.args = {
  enableThemeChange: true,
  darkState: true
};

Answer 1

考虑从这个角度来处理它：故事书应该展示各个组件，而不是其父组件的逻辑。请参阅故事书文档：

\n

\n

故事捕获 UI 组件的渲染状态。开发人员为每个组件编写多个故事，描述组件可以支持的所有 \xe2\x80\x9cinteresting\xe2\x80\x9d 状态。

\n

\n

因此，我建议不要像您所做的那样模拟父组件和状态：

\n

\n
1. 创建多个故事来捕捉不同的状态（黑暗与光明）
\n
2. 使用处理程序函数的Actions 插件，因此在调用函数时您仍然会收到反馈。
\n

\n