故事書：故事渲染完成后的回調

Question

我正在使用 Storybook 在純 HTML、CSS 和 JS（實際上是 jQuery）中創建組件。

我想知道在屏幕上呈現故事時是否有回調 function（例如 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

我將分享一個我發現的不是最佳的解決方案，但可能對其他人有用：

我的故事.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 似乎正在運行。