我的应用程序需要有两个页面,一个登录页面和一个管理页面。两个页面使用不同的主题。我无法将这两个页面的css和js文件集成到一个页面应用程序中。
const jquery = require('mdbootstrap/js/jquery-1.11.3.min.js');
window.jQuery = jquery;
window.$ = jquery;
require('mdbootstrap/css/bootstrap.min.css');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.css');
require('template/homePage/js/plugins/owl-carousel/owl.theme.css');
require('template/homePage/js/plugins/owl-carousel/owl.transitions.css');
require('template/homePage/css/animate.css');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.css');
require('template/homePage/css/preloader.css');
require('template/homePage/css/style.css');
require('mdbootstrap/js/popper.min.js');
require('mdbootstrap/js/bootstrap.min');
require('template/homePage/js/plugins/vivid-icons');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.js');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.jquery.js');
require('template/homePage/js/plugins/wow/wow.js');
require('template/homePage/js/plugins/jquery.easing.min.js');
require('template/homePage/js/main');
此示例导入效果不佳。而且我需要外部链接css和js。
我有两个问题,其中之一是$(...)。scrollspy不是函数其他WOW不是功能。
它们都不按顺序工作。
当您想将资源导入到您的React应用程序中时,可以使用如下所示的导入:
// Import with variable assignation
import logo from './logo.png';
// Import without variable assignation
import './css/index.css'
您可以在create-react-app文档中了解有关此内容的更多信息:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
您可以在此处阅读有关ES7导入的更多信息:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
[我知道您想做的是向应用程序组件中添加库和资源,就像是一个常见的html文件,您无法在React中做到这一点,您需要找到一个实现。
不建议将jQuery与React一起使用,因为您使用jQuery以简单快速的方式编写代码来创建复杂的实现,现在那些复杂的实现可以仅由React和JS来完成,这就是React的目标。
现在我知道您可能甚至不希望使用jQuery,因此建议您使用jQuery,因此,这里有一个链接,您可以在其中获得jQuery来将其安装为React应用程序的插件
https://www.npmjs.com/package/jquery
您将能够像这样将其导入您的组件:
import $ from "jquery";
要在您的React应用程序中使用Bootstrap,请查看用于React的Bootstrap的实现文档,react-bootstrap:
https://react-bootstrap.github.io/getting-started/introduction