亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

UYOU 2023-03-18 11:20:47
我正在使用 Storybook 在純 HTML、CSS 和 JS(實際上是 jQuery)中創建組件。我想知道在屏幕上呈現故事時是否有回調函數(例如useEffectReact),因為只有當組件確實在 DOM 中時我才需要運行相關的 jQuery 代碼。這是我的情況:// Button.stories.js// my pure HTML componentconst 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 來觸發代碼)
查看完整描述

1 回答

?
慕婉清6462132

TA貢獻1804條經驗 獲得超2個贊

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


我的故事.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 似乎可以正常工作。


查看完整回答
反對 回復 2023-03-18
  • 1 回答
  • 0 關注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號