Импорт alpaca в React.js

#javascript #node.js #reactjs #bootstrap-4 #alpacajs

Вопрос:

Я пытаюсь использовать форму Alpaca в приложении React:

 import React, { useEffect, useRef } from "react";
import $ from "jquery";
import * as popper from "popper.js";
import * as bootstrap from "bootstrap";
import * as handlebars from "handlebars";
import alpaca from "alpaca";

var jp = require('jsonpath');

export default function Form() {
    useEffect(() => {
        $("#form").alpaca({
        });
    }, []);

    return <>
        <h2>Alpaca Form</h2>
        <div id="form"/>
    </>;
}

webpack компилирует это, но в браузере я вижу это сообщение:

 jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).alpaca is not a function

При запуске «npm start» отображается ошибка браузера: ReferenceError: jQuery не определен.

1. не используйте var в новом коде, и, как правило, смешивание import и require не кажется хорошей идеей. почему бы и нет import jp from 'jsonpath'; ? И ради всего святого, не добавляйте библиотеки jquery в свои приложения react…

2. Спасибо. Есть несколько альтернатив React для генерации форм на основе схемы, но они, похоже, не такие зрелые, как Alpaca. Я, конечно, могу включить его как внешний скрипт, но я видел, как код других людей импортировал его непосредственно в React…

Ответ №1:

Alpaca требует handlebars.js поэтому вам нужно импортировать его перед импортом alpaca.js . Можете ли вы попробовать и сказать, работает ли это для вас?

1. Я пробовал это: «require(‘handlebars’);» Но он по-прежнему не находит alpaca. Я подозреваю, что мое утверждение «import alpaca» неверно, но понятия не имею, откуда импортировать функцию alpaca?

2. Рули должны быть импортированы перед alpaca, потому что alpaca использует его для разрешения шаблонов, если вы этого не сделаете, alpaca не будет работать, не могли бы вы обновить свой пример и показать мне, как вы импортировали рули, или, пожалуйста, дайте мне больше кода о том, как вы инициализировали alpaca?

3. Я обновил пример. Tbh Я все еще не знаю, что импортировать из handlebars и из alpaca? Я предполагаю, что использование подстановочного знака и «alpaca» в качестве импортированных имен неверно?

4. Не могли бы вы, пожалуйста, создать простой проект с вашим примером на stackblitz? Я думаю, у вас есть проблема с импортом рулей.

5. Спасибо! Тем временем мой текущий проект находится в стадии gitlab.com/AlbertGevorgyan/bootreact На данный момент я могу интегрировать Alpaca в React только как внешний скрипт, но это не очень хорошее решение.

Ответ №2:

Похоже, я нашел решение, которое работает в приложении Spring Boor. Сначала я создаю статический js-скрипт только с одной функцией:

 function alpacaForm(tag, config) {
    $(tag).alpaca(config);
}

Затем я включаю этот скрипт в index.html , следуя всем зависимостям Альпаки:

     <!-- dependencies (jquery, handlebars and bootstrap) -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
    <link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <!-- alpaca -->
    <link type="text/css" href="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"></script>
    <script type="text/javascript" src="./js/alpacaForm.js"></script>

Затем я просто вызываю alpacaForm в своем приложении React:

 export default function Form() {
    useEffect(() => {
        alpacaForm("#form", {
               "schema": {
                   ...
               },
               "options": {
                   ...
               }
           }
        );
    }, []);

    return <>
        <h2>Alpaca Form</h2>
        <div id="form"/>
    </>;
}

Смотрите исходный код здесь: https://gitlab.com/AlbertGevorgyan/bootreact