การนำอัลปาก้าเข้าสู่ React.js

Question

ฉันกำลังพยายามใช้แบบฟอร์ม 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 ไม่ได้กำหนดไว้

Answer 1

Alpaca ต้องใช้ handlebars.js ดังนั้นคุณต้องนำเข้าก่อนนำเข้า alpaca.js คุณสามารถลองและบอกได้ว่าสิ่งนี้เหมาะกับคุณหรือไม่?

Answer 2

ดูเหมือนว่าฉันจะพบโซลูชันที่ใช้ได้กับแอปพลิเคชัน Spring Boor ก่อนอื่นฉันสร้างสคริปต์ js แบบคงที่โดยมีเพียงฟังก์ชันเดียว:

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

จากนั้นฉันรวมสคริปต์นี้ใน index.html ตามการอ้างอิงของ Alpaca ทั้งหมด:

    <!-- 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/[email protected]/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/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