Storybook：故事渲染时回调

Question

我正在使用 Storybook 以纯 HTML、CSS 和 JS（实际上是 jQuery）创建组件。

我想知道当故事在屏幕上渲染时是否有回调函数（例如 React 的

useEffect

），因为只有当组件真正位于 DOM 中时，我才需要运行相对的 jQuery 代码。

这是我的情况：

// Button.stories.js

// my pure HTML component
const Button = () => `<button>My button </button>`;


export default {
    title: 'Buttons',
};

export const ButtonStory = () => Button()

// would be great something like: ButtonStory.callback = function(){ do this}

有什么没有解决办法吗？ （就像将 HTML 组件包装在 React 组件中并使用 useEffect 来触发代码）

谢谢

Answer 1

我将分享一个我发现的不是最佳的解决方案，但也许对其他人有用：

MyStory.stories.js

import {ActionBar} from '../public/components/ActionBar/actionbar.module';
import controller from "!raw-loader!../public/components/ActionBar/controller.js";
import customRenderStory from "../utils/customRenderStory";

export default {
    title: 'Basic/ActionBar',
};

//
export const ActionBarToExport= () =>
    customRenderStory(
        ActionBar(),
        controller,
        2000
    );

自定义RenderStory.js

export default (component, javascript, timeout) => {
    if (javascript !== undefined) setTimeout(() => eval(javascript), timeout)
    return component;
}

这样我就可以在每次渲染故事的时候执行

controller.js

里面的代码。我需要一个超时（可以配置），因为我无法确定代码执行后是否会安装该组件。

就我而言，纯 HTML 和 jQuery 中的 StoryBook 似乎正在工作。

Answer 2

Storybook 现在支持在故事渲染后运行的 play 函数。