[英]Importing alpaca into React.js
我正在嘗試在 React 應用程序中使用 Alpaca 表單:
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 is not defined。
Alpaca 需要 handlebars.js,因此您需要在導入 alpaca.js 之前先導入它。 你能試一試並判斷這是否適合你嗎?
看起來我找到了一個適用於 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/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>
然后我只是在我的 React 應用程序中調用 alpacaForm:
export default function Form() {
useEffect(() => {
alpacaForm("#form", {
"schema": {
...
},
"options": {
...
}
}
);
}, []);
return <>
<h2>Alpaca Form</h2>
<div id="form"/>
</>;
}
在此處查看源代碼: https : //gitlab.com/AlbertGevorgyan/bootreact
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.