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

Question

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

我想知道在屏幕上呈现故事时是否有回调函数（例如useEffectReact），因为只有当组件确实在 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

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

我的故事.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 似乎可以正常工作。