1

我正在使用 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 来触发代码）

谢谢

4

1 回答 1

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 似乎可以正常工作。

于 2020-09-22T17:20:38.940 回答