如何解决故事书:渲染故事后进行回调 MyStory.stories.js customRenderStory.js
我正在与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触发代码)
谢谢
解决方法
我将分享一个我发现的并非最佳解决方案,但也许对其他人有用:
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似乎可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。