javascript - 在 StorybookJS 中模拟 useState

Question

我想知道，在 Storybook 中模拟 React 状态的“最佳实践”是什么(例如 *.stories.js)。
目前我正在尝试实现一个黑暗主题开关。

App Component 有一个名为“darkState”的状态，可以设置 true/false

应用程序组件有一个处理程序“handleThemeChange()”，它根据“darkState”

更改 MUI 主题

标题组件有一个带有“onChange()”的开关或按钮，它在应用程序组件中触发“handleThemeChange()”

MUI 开关需要一个状态才能正常工作(至少我猜是这样)

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

我认为您从错误的 Angular 来处理这个问题，故事书应该展示各个组件，而不是其父组件的逻辑。见 Storybook Docs :

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.

因此，我建议不要像您那样模拟父组件和状态，而是:

创建多个故事来捕捉不同的状态(黑暗与光明)

使用 Actions addon对于处理程序函数，因此在调用函数时您仍然会收到反馈。