故事书：故事渲染完成后的回调

Question

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

我想知道在屏幕上呈现故事时是否有回调函数（例如 React 的 useEffect），因为我需要运行然后是相关的 jQuery 代码只有当组件真的在 DOM.

这是我的情况：

// 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
    );

customRenderStory.js

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

这样我每次渲染故事的时候都可以执行controller.js里面的代码。我需要一个超时时间（可以配置），因为我不能确定代码执行后组件是否会挂载。

就我而言，普通 HTML 和 jQuery 中的 StoryBook 似乎正在运行。

故事书：故事渲染完成后的回调

Storybook: callback when a story has been rendered

html

javascript

storybook

storybook-addon-specifications

MyStory.stories.js

customRenderStory.js