将羊驼导入React.js [英] Importing alpaca into React.js
问题描述
我正在尝试在React应用程序中使用Alpaca表单:
import React,{useEffect,useRef}来自"react";从"jquery"导入$;从"popper.js"导入*作为popper;从"bootstrap"导入*作为引导程序;从"handlebars"导入*作为handlebar;从羊驼"进口羊驼;var jp = require('jsonpath');导出默认函数Form(){useEffect(()=> {$(#form").alpaca({});},[]);返回<>< h2>羊驼形</h2>< div id ="form"/></> ;;}
webpack对此进行编译,但是在浏览器中我看到以下消息:
jquery__WEBPACK_IMPORTED_MODULE_1 ___ default(...)(...).羊驼不是函数
在运行"npm start"时,浏览器错误显示:ReferenceError:未定义jQuery.
看起来我已经找到了在Spring Boor应用程序中有效的解决方案.首先,我创建一个仅具有一个功能的静态js脚本:
function alpacaForm(tag,config){$(标签).alpaca(config);}
然后,在所有Alpaca依赖项之后,将这个脚本包含在index.html中:
<!-依赖项(jquery,handlebars和bootstrap)->< script type ="文本/javascript"src ="//code.jquery.com/jquery-1.11.1.min.js"</script>< script type ="文本/javascript"src ="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"</script>< link type =文本/css"href ="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"rel ="stylesheet"/>< script type ="文本/javascript"src ="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script><!-羊驼->< link type =文本/css"href ="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.css"rel ="stylesheet"/>< script type ="文本/javascript"src ="//cdn.jsdelivr.net/npm/alpaca@1.5.27/dist/alpaca/bootstrap/alpaca.min.js"</script>< script type ="文本/javascript"src =" ./js/alpacaForm.js"</script>
然后我只在我的React应用程序中调用alpacaForm:
导出默认函数Form(){useEffect(()=> {alpacaForm(#form",{模式":{...},选项":{...}});},[]);返回<>< h2>羊驼形</h2>< div id ="form"/></> ;;}
在此处查看源代码: https://gitlab.com/AlbertGevorgyan/bootreact >
I am trying to use an Alpaca form within a React app:
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 compiles this but in the browser I see this message:
jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).alpaca is not a function
While running "npm start", the browser error shows: ReferenceError: jQuery is not defined.
Looks like I have found a solution that works in a Spring Boor application. First, I create a static js script with only one function:
function alpacaForm(tag, config) {
$(tag).alpaca(config);
}
Then I include this script in index.html, following all Alpaca dependencies:
<!-- 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>
Then I just call alpacaForm in my React app:
export default function Form() {
useEffect(() => {
alpacaForm("#form", {
"schema": {
...
},
"options": {
...
}
}
);
}, []);
return <>
<h2>Alpaca Form</h2>
<div id="form"/>
</>;
}
See the source code here: https://gitlab.com/AlbertGevorgyan/bootreact
这篇关于将羊驼导入React.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!