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

customRenderStory.js

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

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

就我而言，纯HTML和jQuery的StoryBook似乎可以正常工作。

故事书：渲染故事后进行回调

1 个答案:

MyStory.stories.js

customRenderStory.js