将 alpaca 导入 React.js答案

【问题标题】：Importing alpaca into React.js将 alpaca 导入 React.js
【发布时间】：2021-02-07 05:03:51
【问题描述】：

我正在尝试在 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。

【问题讨论】：

不要在新代码中使用var，而且通常混合import 和require 似乎不是一个好主意。为什么不import jp from 'jsonpath';？无论如何，不要将 jquery 库添加到您的反应应用程序中......
谢谢。基于模式的表单生成有一些 React 替代方案，但它们似乎不如 Alpaca 成熟。我当然可以将其作为外部脚本包含在内，但我看到其他人的代码将其直接导入 React...

标签： javascript node.js reactjs bootstrap-4 alpacajs

【解决方案1】：

Alpaca 需要 handlebars.js，因此您需要在导入 alpaca.js 之前将其导入。你可以试试看这是否适合你？

【讨论】：

我试过这个：“require('handlebars');”但它仍然没有找到羊驼。我怀疑我的“import alpaca”语句不正确，但不知道从哪里导入 alpaca 函数？
Handlebars 应该在 alpaca 之前导入，因为 alpaca 使用它来进行模板解析，如果你不这样做，alpaca 将无法工作，你能否更新你的示例并告诉我你是如何导入车把的，或者你能给我更多关于你如何初始化羊驼的代码吗？
我已经更新了这个例子。 Tbh 我仍然不知道从车把和羊驼进口什么？我猜使用通配符和“alpaca”作为导入名称是不正确的？
你能用你在 stackblitz 上的例子创建一个简单的项目吗？我认为您对导入车把有疑问。
谢谢！同时，我目前的项目在gitlab.com/AlbertGevorgyan/bootreact下，目前我只能将Alpaca作为外部脚本集成到React中，但这不是一个好的解决方案。

【解决方案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/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

【讨论】：