Как создать несколько встроенных виджетов? - PullRequest
Новая
       11

Как создать несколько встроенных виджетов?

1 голос
/ 12 марта 2020

Как выставить функцию, которая может отрисовывать приложение preact, где я могу передать позицию рендеринга и реквизиты?

Конфигурация веб-пакета не может быть отредактирована в preact, так как этого добиться?

Я видел плагин preact-среду обитания, виджет не может быть обработан путем передачи реквизитов функции.

Для моего случая использования мне нужно создать пакет. js, который содержит несколько встраиваемых виджетов и preact source.

Я могу вызвать renderWidgetA (position, props), renderWidgetB (position, props), чтобы отобразить его в position, также мне нужно передать различные реквизиты существующему визуализированному виджету

Есть ли способ достичь этого?

Это похожий лог c с svelte: Как представить функцию в svelte, которая может принимать параметры для рендеринга?

Высоко ценю за любые отзывы.

1 Ответ

1 голос
/ 13 марта 2020

Предполагая, что под позицией вы подразумеваете Монтирование HTML элемента, например body, div или некоторого селектора CSS, например '#mountElm', тогда вы можете экспортировать функцию рендеринга, например: 

import { render, h } from 'preact';

// WidgetA is a Preact component.
// It could be functional or class component.
export function WidgetA(props) {

    // Use props here

    return (
        <div>WidgetA</div>
    );
}


// Render function for WidgetA
export function renderWidgetA(position, props) {

    const renderElm = position instanceof HTMLElement
        ? position
        : document.querySelector(position);

    render(h(Component, props), renderElm);
}

Когда этот файл связан, его можно просто использовать следующим образом: 

import { renderWidgetA } from './my-bundle.js';

renderWidgetA('body', { title: 'Hello world' });

Вы можете использовать аналогичный шаблон для создания нескольких компонентов. Кроме того, вы можете просто извлечь функцию рендеринга в более общий c вариант.

Вопрос 1: Как сделать функцию доступной для глобального window объекта?

Чтобы добиться этого, вы должны Опции:

  1. Используйте Webpack и укажите libraryTarget для вывода. Это может быть umd или подобное. Подробнее здесь .
  2. Если вы не можете использовать Webpack или запрещено изменять его, то в конце файла вы можете явно связать его с глобальным объектом.

Пример: 

window.myLib = { renderWidgetA };

// Usage
myLib.renderWidgetA('body', { /* some props */});

Вопрос 2: Что делать при смене реквизита для определенного виджета.

Вам необходимо изменить функцию render. Он принимает необязательный третий параметр , который можно установить на true. Таким образом, ваша функция становится: 

export function renderWidgetA(position, props) {

    const renderElm = position instanceof HTMLElement
        ? position
        : document.querySelector(position);

    // NOTE THE THIRD PARAM
    render(h(Component, props), renderElm, true);
}

Однажды, вы делаете это, просто вызывая функцию renderWidgetA всякий раз, когда меняется ваш реквизит. Это абсолютно безвредно. Просто убедитесь, что ваш узел позиции остается неизменным при повторном рендеринге. Также всегда помните, что пользовательский интерфейс как функция состояния . ВДОМ возьмет на себя все остальное.

...