Блог

Главная - Вопросы по программированию - Сборник рассказов: обратный вызов при визуализации истории

Сборник рассказов: обратный вызов при визуализации истории

#javascript #html #storybook #storybook-addon-specifications

#javascript #HTML #сборник рассказов #сборник рассказов-дополнение-спецификации

Вопрос:

Я работаю с сборником рассказов для создания компонентов в чистом HTML, CSS и JS (на самом деле jQuery).

Мне интересно, есть ли функция обратного вызова при отображении истории на экране (например useEffect , для React), потому что мне нужно запускать относительный код jQuery только тогда, когда компонент действительно находится в DOM.

Вот моя ситуация:

 // 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 для запуска кода)

Спасибо

Ответ №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, похоже, работает.

Комментарии:

1. Спасибо вам за это! Для меня это работает идеально. Я даже смог установить значение timeout 0 . Я знаю, что это не обычный вариант использования Storybook для работы с jQuery (или даже с ванильным JS), но когда вам это нужно, вам это нужно. Еще раз спасибо!

2. Добро пожаловать @TreyPiepmeier. Допустим, я унаследовал этот проект, и первым делом нужно было придать ему больше структуры, представив сборник рассказов 🙂