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

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.jsimport {ActionBar} from '../public/components/ActionBar/actionbar.module';import controller from "!raw-loader!../public/components/ActionBar/controller.js";import customRenderStory from "../utils/customRenderStory";export default {&nbsp; &nbsp; title: 'Basic/ActionBar',};//export const ActionBarToExport= () =>&nbsp; &nbsp; customRenderStory(&nbsp; &nbsp; &nbsp; &nbsp; ActionBar(),&nbsp; &nbsp; &nbsp; &nbsp; controller,&nbsp; &nbsp; &nbsp; &nbsp; 2000&nbsp; &nbsp; );customRenderStory.jsexport default (component, javascript, timeout) => {&nbsp; &nbsp; if (javascript !== undefined) setTimeout(() => eval(javascript), timeout)&nbsp; &nbsp; return component;}这样我controller.js每次渲染故事的时候都可以执行里面的代码。我需要一个超时时间（可以配置），因为我不能确定组件是否会在代码执行后挂载。就我而言，纯 HTML 和 jQuery 中的 StoryBook 似乎可以正常工作。