css - TypeError: $.each 不是函数 (ReactJS)-6ren

css - TypeError: $.each 不是函数 (ReactJS)

转载作者：行者123 更新时间：2023-11-27 23:32:20

我有一个 ReactJS (Create-React-App) 元素。当我运行命令 npm start 时，它在我的本地主机上成功呈现。

但是当我运行构建命令时:npm run build 我得到以下错误:

yarn run v1.16.0 $ react-scripts build Creating an optimized production build... Failed to compile.

./src/css/master.css Module build failed: TypeError: $.each is not a function

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

但是我没有在我的 master.css 中的任何地方使用过 $.each 函数

master.css

@charset "utf-8";
/* CSS Document */

/* for icons */
@font-face {
    font-family: 'Glyphicons Halflings';
    src:url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('eot'), 
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    url('../fonts/glyphicons-halflings-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.glyphicon {  /*http://getbootstrap.com/components//*/ /* for icon list */
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: bold;
    line-height: 1;
    position: relative;
    top: 1px;
}

/* for refrence icons */
.glyphicon-earphone:before{content:"\e182";
    color:#00429b;
}


.ajax__tab_xp .ajax__tab_tab {
height: 20px;
min-height:20px;}

/* end for icons */

@font-face {
    font-family: 'omnesmedium';
    src:url('../fonts/omnesmedium.eot');
    src: url('../fonts/omnesmedium.eot?#iefix') format('eot'), 
    url('../fonts/omnesmedium.woff') format('woff'), 
    url('../fonts/omnesmedium.woff2') format('woff2'),
    url('../fonts/omnesmedium.ttf') format('truetype'),
    url('../fonts/omnesmedium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opensansregular';
    src:url('../fonts/opensansregular.eot');
    src: url('../fonts/opensansregular.eot?#iefix') format('eot'), 
    url('../fonts/opensansregular.woff') format('woff'), 
    url('../fonts/opensansregular.woff2') format('woff2'),
    url('../fonts/opensansregular.ttf') format('truetype'),
    url('../fonts/opensansregular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opensanssemibold';
    src:url('../fonts/opensanssemibold.eot');
    src: url('../fonts/opensanssemibold.eot?#iefix') format('eot'), 
    url('../fonts/opensanssemibold.woff') format('woff'), 
    url('../fonts/opensanssemibold.woff2') format('woff2'),
    url('../fonts/opensanssemibold.ttf') format('truetype'),
    url('../fonts/opensanssemibold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*-------------------------------------------------------*/
body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0 auto;
    font-size:100%; 
}
* {
    outline: none;
    box-sizing:border-box;
    -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;   
}
a:link, a:visited {
    color: #2e4fa5;
    text-decoration: none;
}
a:hover {
    color: #2e4fa5;
    text-decoration: underline;
}
.clear {
    clear: both;
}
.wrapper {
    overflow: hidden;/*auto*/
}
.contentarea {
    max-width: 999px !important;
    margin: 0 auto !important;
}

.insidebg
{
    background:url(../img/topbg.jpg) repeat-x top #FFFFFF;
    height:135px;
}

.homebg
{
    background:url(../img/homebg.jpg) repeat-x top #0a86ca;
}

.loginbg
{
    background:url(../img/jio_loginbg.jpg) top center;
    height:100%;
    background-color:#0a86ca;
}

.loginarea
{
    width:75%;
    background:url(../img/couple.png) left top no-repeat;
    float:right;
    margin-top:40px;
    margin-bottom:100px;
    height:420px;
}

.loginpatch
{
    width:400px;
    background-color:#FFFFFF;
    -webkit-appearance: none;
    border-radius:8px;  
    float:right;
    text-align: center;
    padding:35px;
    margin-top:100px;
    border: 5px solid rgb(255, 255, 255);
    border: 5px solid rgba(255, 255, 255, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ 
}
.loginpatch .StoreNo input[type="text"]
{
    font-size: .9em;    
    font-family:opensansregular, Arial, Helvetica, sans-serif;  

    border:1px solid #e1e4eb;
    -webkit-appearance: none;
    border-radius:8px;
    padding:10px;
    /*text-indent:35px;*/
    /*padding-left: 45px;*/ 
    margin:10px 0px;
    width:70%;
    color:#787b82;
}
.loginpatch h1
{
    font-size:2em;
    color:#0b81c6;
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-weight:normal;
    margin:0;
    padding:0;  
}

.txtbox1 
{
    font-size: .9em;    
    font-family:opensansregular, Arial, Helvetica, sans-serif;  
    background:url(../img/userid-icon.jpg) left no-repeat;
    border:1px solid #e1e4eb;
    -webkit-appearance: none;
    border-radius:8px;
    padding:10px;
    /*text-indent:35px;*/
    padding-left: 45px; 
    margin:10px 0px;
    width:100%;
    color:#787b82;
}

.txtbox2
{
    font-size: .9em;    
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    background:url(../img/password-icon.jpg) left no-repeat;
    border:1px solid #e1e4eb;
    -webkit-appearance: none;
    border-radius:8px;
    padding:10px;
    /*text-indent:35px;*/
    padding-left: 45px; 
    margin:10px 0px;
    width:100%;
    color:#787b82;  
}

.selectoperator select
{
    font-size: .9em;    
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    border:1px solid #e1e4eb;
    color:#000000;
    border-radius:8px;
    padding:10px;
    /*text-indent:35px;*/
    margin:10px 0px;
    width:100%;
    color:#787b82;  
    -webkit-appearance: none;
    -moz-appearance: none;   
    background:url(../img/arrow-icon.png) 100% center no-repeat;    
}


/*.txtbox3
{
    font-size: .9em;    
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    border:1px solid #e1e4eb;
    border-radius:8px;
    padding:10px;
    margin:10px 0px;
    width:100%;
    color:#787b82;  
}
*/
.loginpatch .goldbutton
{
    padding:.1em;
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#a56d00;
    width:95px;
    border:1px solid #ffb400;
    -webkit-appearance: none;
    border-radius:4px;
    background:url(../img/goldarrow-login.jpg) right 12% center no-repeat #ffc600;
    text-align:center;
}
.loginpatch .goldbuttonPopup
{
    padding:.1em;
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#a56d00;
    width:100px;
    border:1px solid #ffb400;
    -webkit-appearance: none;
    border-radius:4px;
    background:url(../img/goldarrow-login.jpg) right 1% center no-repeat #ffc600;
    text-align:center;
}
.forgotpasswordtxt
{
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:1em;  
    color:#0b81c6;
    float:right;
    width:150px;
    margin-top:12px;
    text-decoration:none;       
}

.forgotpasswordtxt a
{
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:1em;  
    color:#0b81c6;
    float:right;
    width:150px;
    text-decoration:none;   
}

.forgotpasswordtxt a:hover
{
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-size:1em;  
    color:#0b81c6;
    float:right;
    width:150px;
    text-decoration:underline;
}


.portaltitle
{
    color:#214497;
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-size:2em;
    font-weight:normal;
    text-decoration:none;
    float:right;
    margin-top:0.6em;   
    text-align:right;       

}

.header
{
    overflow:hidden;
}


.logo
{
    overflow:hidden;
    float:left;
}

.welcomearea
{
    overflow:hidden;
    width:500px;
    float:right;
    text-align:right;
}

.yellowbg
{
    background:#ffdd00;
    height:4px;
    border-bottom:1px solid #bac5df;
    overflow:hidden;
    width:100%; 
}
.navbluebg
{
    background:#214497;
    height:55px;
    /*border-bottom:1px solid #bac5df;*/
    width:100%; 
}

.yellowbgPopup
{
    background:#ffdd00;
    height:30px;
    border-bottom:1px solid #bac5df;
    overflow:hidden;
    position:absolute;
    width:100%; 
    color:#214497;
    font-family:-Opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em;
    padding :5px;
    font-weight:bold;

}

.userpic
{
    padding:15px;
    border-left:1px solid #f8f9fb;  
    text-align:right;
    float:right;
}

.storepic
{
    text-align:right;
    float:right;
    padding: 24px 0px 24px 0px;
}

.welcometxt
{
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#a1a2a3;
    font-weight:normal;
    text-decoration:none;
    float:right;
    margin-top:1.6em;   
    text-align:right;
}

.welcometxt a
{
    color:#a1a2a3;
}

.storecodenum
{
    font-family:omnesmedium, Arial, Helvetica, sans-serif;
    /*font-size:1em;*/
    color:#616671;
    font-weight:normal;
    text-decoration:none;
    margin-right:10px;
    width:120px;
    margin-top:1.6em;
    float:right;
}
.storecodenum select
{
    font-size: .8em;    
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    border:1px solid #e1e4eb;
    color:#000000;
    border-radius:4px;
    /*padding:5px;*/
    /*text-indent:35px;*/
    /*margin:5px 0px;*/
    width:90%;
    color:#787b82;  
    -webkit-appearance: none;
    -moz-appearance: none;   
    background:url(../img/arrow-icon.png) 90% right no-repeat;  
}
.storecodenum input[type="text"]
{
    background:#FFFFFF;
    /*padding:10px;*/
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.8em;
    /*margin:10px 0px;  
    margin-left:.8em;*/
    color:#787b82;
    border:1px solid #edd995;
    -webkit-appearance: none;
    border-radius:6px;
    width:110px;    
}
.navigation
{
    text-align:center;
}

.bredcrum
{
    overflow:hidden;
    color:#7f848f;
    margin:10px 0;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em;
    font-weight:normal;
    text-decoration:none;   
}

.bredcrum a
{
    color:#214497;
    font-weight:normal;
    text-decoration:none;   
}

.bredcrum a:hover
{
    color:#214497;
    font-weight:normal;
    text-decoration:underline;      
}

.yellowtable
{
    background-color:#fffdf6;
    border-top:1px solid #f9f0d0;
    border-left:1px solid #f9f0d0;
    border-right:1px solid #f9f0d0; 
    border-bottom:2px solid #f9f0d0;            
    padding:15px;
    margin-bottom: -15px;   
}

.yellowline
{
    background-color:#fffdf6;
    border-top:1px solid #f9f0d0;
    /* border-left:1px solid #f9f0d0;
    border-right:1px solid #f9f0d0; 
    border-bottom:1px solid #f9f0d0;             */

}

.yellowtxt
{
    font-family:opensanssemibold, Arial, Helvetica, sans-serif; 
    color:#a6881e;
    font-size:1.2em;
    text-align:center;  
    font-weight:normal;
    width:100%;
}

.yellowtable input[type="text"]
{
    background:#FFFFFF;
    padding:.6em;
    font-family:calibribold, Arial, Helvetica, sans-serif;
    font-size:.8em;
    margin-right:.8em;
    color:#656565;
    width:250px;
    border:1px solid #edd995;
    -webkit-appearance: none;
    border-radius:8px;
}

.yellowtable .bluebutton
{
    background:#0081c5;
    padding:.6em;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.8em;
    margin-right:.8em;
    color:#ffffff;
    width:100px;
    border:1px solid #3974b9;
    -webkit-appearance: none;
    border-radius:8px;
}

.yellowtable .redbutton
{
    background:#e0252c;
    padding:.6em;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.8em;
    margin-right:.8em;
    color:#ffffff;
    width:100px;
    border:1px solid #bd1515;
    -webkit-appearance: none;
    border-radius:8px;
}

.tablelist
{
    text-align:center;
    float:0 auto;
    margin:1em 0 0 0;
}

.tablelist .blueeditbutton
{
    padding:.6em;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em;
    margin-right:.8em;
    color:#ffffff;
    width:80px;
    border:none;
    -webkit-appearance: none;
    border-radius:4px;
    background:url(../img/edit-icon.jpg) left 10% center no-repeat #0081c5; 
}

.tablelist .blueeditbuttonLarge
{
    padding:.6em;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em;
    margin-right:.8em;
    color:#ffffff;
    width:110px;
    border:none;
    -webkit-appearance: none;
    border-radius:4px;
    background:url(../img/edit-icon.jpg) left 10% center no-repeat #0081c5; 
}


.tablelist .greydeletebutton
{
    padding:.6em;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em;
    margin-right:.8em;
    color:#ffffff;
    width:80px;
    border:none;
    -webkit-appearance: none;
    border-radius:4px;
    background:url(../img/delete-icon.jpg) left 10% center no-repeat #7b818f;
    text-indent:10px;
}

.tablelist .greybuttonActCode
{
    padding:.6em;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em;
    margin-right:.8em;
    color:#ffffff;
    border:none;
    -webkit-appearance: none;
    border-radius:4px;
    background:url(../) left 10% center no-repeat #7b818f;
    text-indent:10px;
}

.tabletype2
{
    overflow:hidden;
    width:100%;
    float:left;
    border:1px solid #f9f0d0;
    padding:0;
    margin-top: 14px;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    /*height:100%;*/
}

.tabletype2 table
{
    padding:10px;
    /*height: 910px;*/
    }

.tabletype2 table tr
{
    padding:10px;
    border-top:1px solid #fbf3d7;
    border-bottom:1px solid #fbf3d7;
}

.tabletype2 .title
{
    color:#a6881e;
    padding:10px;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em;
    text-align:left;
    font-weight:800;
    background:#fffdf6;
    border-right:1px solid #f9f0d0;
    width: 25%; 
}

.tabletype2 input[type="text"]
{
    background:#FFFFFF;
    padding:10px;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.8em;
    margin:10px 0px;    
    margin-left:.8em;
    color:#787b82;
    border:1px solid #edd995;
    -webkit-appearance: none;
    border-radius:8px;
    width:80%;  
}
.mytable input[type="text"]
{
    background:#FFFFFF;
    padding:10px;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:10px 0px;    
    margin-left:.8em;
    color:#787b82;
    border:1px solid #edd995;
    -webkit-appearance: none;
    border-radius:8px;
    width:100px;    
}
.tabletype2 .smallInput input[type="text"]
{
    background:#FFFFFF;
    padding:10px;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.8em;
    margin:10px 0px;    
    margin-left:.8em;
    color:#787b82;
    border:1px solid #edd995;
    -webkit-appearance: none;
    border-radius:8px;
    width:130px;    
}
.tabletype2 input[type="password"]
{
    background:#FFFFFF;
    padding:10px;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.8em;
    margin:10px 0px;    
    margin-left:.8em;
    color:#787b82;
    border:1px solid #edd995;
    -webkit-appearance: none;
    border-radius:8px;
    width:80%;  
}

.tabletype2 select
{
    font-size: .9em;    
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    border:1px solid #edd995;
    color:#787b82;
    border-radius:8px;
    padding:8px;
    /*text-indent:35px;*/
    margin:10px 0px;    
    margin-left:.8em;
    width:80%;
    color:#787b82;  
    -webkit-appearance: none;
    -moz-appearance: none;   
    background:url(../img/selectarrow.jpg) 100% center no-repeat;       
}

.tabletype2 select option
{
    padding-left:10px;
}
 .chkBoxList1 td
{
    width:35%;

    border-right:1px solid #fbf3d7;
}
.box
{
    overflow:hidden;
    width:30%;
    float:left;
    margin:10px;
}

.box h3
{
    color:#214497;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.9em; 
}

.genbutton
{
    background:#0081c5;
    padding:.6em;
    font-family:opensansregular, Arial, Helvetica, sans-serif;
    font-size:.8em;
    margin-right:.8em;
    color:#ffffff;
    width:100px;
    border:1px solid #3974b9;
    -webkit-appearance: none;
    border-radius:8px;
    margin-top:10px;
}

.testCssStyle {
    color: #1f5ca9;
    background-color: #c5d4e6;
    table-layout: auto;
    border-collapse: separate;
    border-right: gray thin solid;
    border-top: gray thin solid;
    border-left: gray thin solid;
    border-bottom: gray thin solid;
}

.fl-left {
    float: left;
}
.sch-btn {
    width: 68px;
    padding: 10px;
    margin-left: 2px;
}
.bcol-white {
    background-color: #ffffff !important;
}
.btn-blue {
    background: #0081c5;
    padding: .6em;
    font-family: opensansregular, Arial, Helvetica, sans-serif;
    font-size: .8em;
    color: #ffffff;
    width: 100px;
    border: 1px solid #3974b9;
    -webkit-appearance: none;
    border-radius: 8px;
}
.lbl-txt-1 {
    font-family: humnst777, Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    padding: 10px;
}
.txt-center {
    text-align: center;
}
.fl-right {
    float: right;
}
.hiddencol {
    display: none;
}
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}
/* added by chandrani */
.loadingcc{
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 10px solid #e74c3c;
    position: relative;
    animation: a1 2s linear infinite;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loadingcc::before,.loadingcc::after{
    content: '';
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: -10px;
    box-sizing: border-box;
    border-radius: 50%;
  }

  .loadingcc::before{
    border-top: 10px solid #e67e22;
    transform: rotate(120deg);
  }

  .loadingcc::after{
    border-top: 10px solid #3498db;
    transform: rotate(240deg);
  }

  .loadingcc span{
    position: absolute;
    width: 110px;
    height: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    animation: a2 2s linear infinite;
  }

  @keyframes a1 {
    to{
      transform: rotate(360deg);
    }
  }

  @keyframes a2 {
    to{
      transform: rotate(-360deg);
    }
  }
/* end   */

.w-30 {width:30%;float:left;display:block;margin-right:10px;}
.box-100 {width:100%;float:left;display:block;padding:5px;}
.ajax__calendar_container {border: 1px solid #646464;background-color: #ffffff;color: #000000;}
.ajax__calendar_container table thead tr td {font-size:11px !important;padding:0px !important;color:#000000 !important;border-left:none !important;border-right:none !important;background-color:#ffffff !important;}
.editdate tbody td {font-size:11px !important;padding:0px !important;color:#000000 !important;border-left:none !important;border-right:none !important;background-color:#ffffff !important;}
.tbl-bb {font-size:16px !important;}
.mt1 {margin-top:1px;}
.mt4 {margin-top:4px;}
.tblbg {background-color:transparent; border-style:none;}
.bw0{border-width:0px}
.mr-10{margin-right:10px}
.whitespace{white-space:nowrap;}
.fade.show{opacity: 1;}
.col-red{color:#ff0000;}
.text-center{text-align:center;}
.mtb10{margin:10px auto;}
.tbl-global{margin:auto;width:100%;}
.tbl-global thead th td{padding:5px;}
.tbl-global tbody tr td{padding:5px;}
.tabletype2 textarea{background:#FFFFFF;padding:10px;font-family:opensansregular, Arial, Helvetica, sans-serif;font-size:.8em;margin:10px 0px;margin-left:.8em;color:#787b82;border:1px solid #edd995;-webkit-appearance: none;border-radius:8px;width:80%;}
.tab-menu{background-color:transparent !important;padding: inherit !important;border-bottom: 1px solid #f9f0d0 !important;position:inherit !important;}
.nav-tabs>li>a.active, .nav-tabs>li>a.active:hover, .nav-tabs>li>a.active:focus{border:1px solid #f9f0d0;border-bottom-color:transparent;background-color:#ffffff;}
label{font-weight:normal;}
.ml-10{margin-left:10px !important;}
.tabletype2 .title{font-size:.8em;width:16%;    }
/*End New Class Added by Krishna*/
/*.pie {
    border-radius:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    behavior: url(../PIE.htc);
}*/

package.json

{
  "name": "react-express-tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.2",
    "bootstrap": "4.0.0",
    "cors": "^2.8.4",
    "crypto-js": "^3.1.9-1",
    "express": "^4.16.3",
    "jquery": "^1.12.0",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "mongoose": "^5.0.13",
    "nodemon": "^1.17.3",
    "popper.js": "^1.15.0",
    "react": "^16.3.1",
    "react-bell-icon": "^1.0.0",
    "react-confirm-alert": "^2.4.1",
    "react-dom": "^16.3.1",
    "react-global-configuration": "^1.3.0",
    "react-idle-timer": "^4.2.8",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "set PORT= 3006 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not ie <= 11",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.0"
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, withRouter} from 'react-router-dom';
//import {BrowserRouter, Route, Redirect, Switch, withRouter} from 'react-router-dom';


import Login from './components/Login.js';
import Default from'./components/Default.js';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Route path="/Default" component={Default}/>

        <Router >
      <Switch>
        {/* chandrani */}
      <Route exact path="/" component={Login}/>
      </Switch>
      </Router>
      </div>
    )
  }

}

export default withRouter(App);

helper.jsx 我在其中使用了 jQuery:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../css/style.css';
import $ from 'jquery';
import 'jquery-ui';
import BellIcon from 'react-bell-icon';

export function reusecompdidmount() {
    $(document).ready(function() {
        $("input").attr("autocomplete", "off");
        $('.nav-list li:not(ul li ul li):gt(4)').hide();
        $('.next').click(function() {
            if ($('.nav-list li:not(ul li ul li):visible:last').is(':last-child')) {
                return false;
            }

            var currentIndex = $('.nav-list').children('li:not(ul li ul li):visible:last').index(),
    nextIndex = currentIndex + 6;
            console.log("currentIndex " + currentIndex + " nextIndex" + nextIndex);
            $('.nav-list li:not(ul li ul li)').hide();
            $('.nav-list li:not(ul li ul li):lt(' + nextIndex + '):gt(' + currentIndex + ')').show("slide", 500);
        });
        $('.prev').click(function() {
            if ($('.nav-list li:not(ul li ul li):visible:first').is(':first-child')) {
                return false;
            }

            var currIndex = $('.nav-list').children('li:not(ul li ul li):visible:first').index(),
    prevIndex = currIndex - 6;
            $('.nav-list li:not(ul li ul li)').hide();
            if (prevIndex < 0) {
                $('.nav-list li:not(ul li ul li):lt(' + currIndex + ')').show("slide", 500);
            } else {
                $('.nav-list li:not(ul li ul li):lt(' + currIndex + '):gt(' + prevIndex + ')').show("slide", 500);
            }
        });
    });
  }

  export function slider(){
      const $ = require("jquery");
      require("jquery-ui/ui/effects/effect-slide");
    $(document).ready(function() {
        $("input").attr("autocomplete", "off");
        $('.nav-list li:not(ul li ul li):gt(4)').hide();
        $('.next').click(function() {
            if ($('.nav-list li:not(ul li ul li):visible:last').is(':last-child')) {
                return false;
            }

            var currentIndex = $('.nav-list').children('li:not(ul li ul li):visible:last').index(),
    nextIndex = currentIndex + 6;
            //console.log("currentIndex01 " + currentIndex + " nextIndex" + nextIndex);
            $('.nav-list li:not(ul li ul li)').hide();
            $('.nav-list li:not(ul li ul li):lt(' + nextIndex + '):gt(' + currentIndex + ')').show("slide", 500);
        });
        $('.prev').click(function() {
            if ($('.nav-list li:not(ul li ul li):visible:first').is(':first-child')) {
                return false;
            }

            var currIndex = $('.nav-list').children('li:not(ul li ul li):visible:first').index(),
    prevIndex = currIndex - 6;
            $('.nav-list li:not(ul li ul li)').hide();
            if (prevIndex < 0) {
                $('.nav-list li:not(ul li ul li):lt(' + currIndex + ')').show("slide", 500);
            } else {
                $('.nav-list li:not(ul li ul li):lt(' + currIndex + '):gt(' + prevIndex + ')').show("slide", 500);
            }
        });
    });
  }

我做错了什么？

最佳答案

我能想到的唯一问题是在您的 index.js 中导入 Bootstrap 。尝试将其更改为:

导入 'bootstrap/dist/css/bootstrap.min.css';

您可能还需要添加 bootstrap 的 JS:import 'bootstrap/dist/js/bootstrap.min.js';

编辑:另一个问题可能是您导入了多个 jQuery 实例。因此，除了顶级(尤其是那些内联“require”导入)之外，删除所有这些，我认为 bootstrap 或 jquery-ui 可能会自己拉 jQuery，所以在那种情况下你根本不需要包含它。

关于css - TypeError: $.each 不是函数 (ReactJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57428747/

文章推荐： css - 自定义 CSS 以重新排列移动尺寸屏幕中的标题位置

文章推荐： jquery - 单击按钮将侧边栏从屏幕移到内部

文章推荐： c++ - wcstombs_s 无法正常工作

reactjs - ReactJS 中的非标准自定义属性？
这是关于非标准属性的。 https://facebook.github.io/react/docs/tags-and-attributes.html 在 react 中我做了这个: React.cr
reactjs - ReactJS 如何在组件之间传递数据？
我制作了 2 个组件:1)内容(使用 fetch() 显示数据)2)分页(共5页，每页16个对象) 我创建了 2 个状态变量，分别称为 start:0 和 end:16。现在，每当用户单击页码时，我都
reactjs - ReactJS 中的嵌入式文档查看器控件
我们正在使用 ReactJS 创建一个搜索前端。要求是当用户单击文档名称时，该文档必须在嵌入式查看器中打开。有人为此使用过任何 ReactJS 组件吗？否则，我应该使用 JQuery 查看器组件吗？请
reactjs - 登录 Reactjs
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 1 年前。
reactjs - ReactJS 最流行的后端框架是什么？
我现有的项目: 前端框架 - PHP Codeigniter 和 PHP Laravel 后端框架 - JAVA Springboot 我正在尝试将前端框架更改为 ReactJS。我想知道与 Reac
reactjs - Reactjs 中的递归操作调用
我有一个实现刷新授权 token 的方案。在这种情况下，我为每种操作(发布、获取、删除)实现了一个通用操作，并使用参数调用它们。 export function Get(param) { return
reactjs - (ReactJS) 如何获取日期类型输入的输入值？
我现在有 { _this.setState({startDate: input})}}/> 无论我一直在改变什么(onChange 部分到 ref 等等)，当我 console.log 我的状态时，
reactjs - 测试在按钮上呈现另一个组件单击 ReactJS
我在两个不同的文件中有两个单独的组件组件A 和组件B 我在中有一个按钮组件B 现在我想测试当中的特定按钮时组件B 被点击，组件A 应呈现如下: import { render, screen,
reactjs - 在渲染方法中设置状态 - Reactjs
我有一个包含几个问题的表格。一些问题有一组子问题。这些是使用以下代码呈现的。 { Object.keys(this.props.moduleDetails.questions).map(
reactjs - 如何将数据从一个组件传递到另一个 ReactJS
我有两个组件。第一个状态初始化: import React from 'react'; class One extends React.Component { constructor(prop
reactjs - 如何在对象数组中添加一个对象？ ReactJS？
我的项目是一个对象数组，我只获取名称并在 3 in 3 的屏幕上渲染，使用“下一个”和“上一个”按钮更改名称，并且可以过滤字母。我想要添加一个新值，在输入中键入并单击按钮添加。我的代码按钮: ad
reactjs - 从几个地方操作一个组件实例 ReactJS
我有一个组件实例，应该从不同的地方更新。如何从其他几个组件中更新此组件的 props？ class ParentComponent extends React.Component { ...
reactjs - 基于变量的渲染组件 - ReactJS
我想问，是否可以基于变量返回一个组件，我的想法是否可以: var location = this.props.location // Eg. Asia,Australia 我的问题是我需要单独手动导
reactjs - 自动选择输入中的文本 - Reactjs
有没有办法在渲染后立即选择要覆盖的文本？我的意思是选择 - 最佳答案您可以尝试使用两种方法.focus和.select .focus() method sets focus on the speci
reactjs - 如何在提交中传递表单变量？ ReactJS
我渲染了以下内容: 这是事件处理程序: handleCompanySubmit(event) { console.log("company submit") e
reactjs - reactjs datepicker日期格式
作为ReactJS的初学者，我现在使用出色的ReactJS Datepicker。有关我的自定义日期格式的问题: 我没有找到任何文档来解释所有可能性，例如M是月份，MM是2个字母的月份，依此类推。(我
reactjs - ReactJs 中的搜索表
我创建了一个表并正在对其进行过滤，但是当我清除搜索查询时，表数据不会显示，并且表会卡在查询结果上。SearchBox 是文本框，TableData 是表格，在 Container 中我正在更改 Sea
reactjs - 如何更新表中特定行的状态 ReactJS
我在表格设置中有图标，这样当单击图标时，会呈现不同的图标。现在这工作正常，但我想为我单击的行中的特定行重新呈现不同的图标，而不是在每一行中重新呈现不同的图标。不知道我将如何去做这件事。这是我的代码:
reactjs - 更改不同组件的状态 - ReactJS
我正在尝试使用 React 构建一个简单的应用程序，它有两个组件，一个嵌入另一个组件。子组件是一个收缩的菜单，单击它时，它会展开。我希望能够在单击父元素或子元素失去焦点时重新收缩它。这是父组件的样子
reactjs - ReactJS 如何在用户不活动时自动注销？
我需要知道 REACT JS 或 HTML5 中是否有任何 API 可以提供用户不活动时自动注销的功能。我的代码如下，我不知道出了什么问题，它给了我错误 startTimer 未定义和不必要的绑定(b

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - TypeError: $.each 不是函数 (ReactJS)