React Sementic不停地说："ReferenceError: jQuery未定义“

Question

我是一个新的反应，我有一个关于语义UI的问题。

下面是一个教程，其中我必须在App.js中使用语义UI的头组件，包括

    import { Header } from 'semantic-ui-css'

但是，每当页面使用此代码进行编译时，它都会返回如下错误消息：

ReferenceError: jQuery is not defined

./node_modules/semantic-ui-css/semantic.js

node_modules/semantic-ui-css/semantic.js:497

  494 | });

  495 | 

  496 | 

> 497 | })( jQuery, window, document );

  498 | 

  499 | /*!

  500 |  * # Semantic UI 2.4.1 - Form Validation

在寻找解决方案时，我阅读了许多建议

npm install -s jquery

我做到了，但它仍然返回相同的错误消息。

如果我能帮上忙的话，我会非常感激的。

以下是我认为与这个问题相关的部分文件：

App.js

​

import React, { Component } from 'react';
//import './App.css';
import { Header } from 'semantic-ui-css'
import TeacherForms from './components/TeacherForm';
import CourseList from './components/CourseList';
import { Col, Row, Container, Navbar, Button} from  'react-bootstrap'
import { connect } from 'react-redux';
import * as courseAction from './actions/courseAction';
import DynamicForm from './components/DynamicForm'

class App extends Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

    this.state = {
      name: ''
    }
  }
  
  handleChange(e){
    this.setState({
      name: e.target.value
    })
  }

  handleSubmit(e){

    e.preventDefault();
    let course = {
      name: this.state.name
    }
    this.setState({
      name: ''
    });
    if (course.name == ''){
      window.alert('Please enter a course name.')
    }else{
      this.props.addCourse(course);
    } 
  }

  listView(data, index){
    return (
      <div className="row">
        <div className="col-md-10">      
              <Button className = "text-left " variant = "light" block>
                {data.name}
              </Button>
        </div>
        <div className="col-md-2">
          <confirm>
            <button onClick={(e) => {if (window.confirm('Are you sure you want to delete this item?'))
              this.deleteCourse(e, index)
            }} className="btn btn-danger">
                Remove
            </button>
          </confirm>
        </div>
    </div> 
    )
  }

  deleteCourse(e, index){
    e.preventDefault();
    this.props.deleteCourse(index);
  }

  render(){
    let name;
    return ( 
      <div className="full-page">
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand href="#home">Brandeis Course Scheduling</Navbar.Brand>
        </Navbar>
        <Row>
        <Col>
          <div className="course-list">
                <h1> Academic Requirements Form </h1>
                <hr />
                <div class = "overflow">
                <h3>Add Course</h3>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" onChange={this.handleChange} className="form-control" value={this.state.name}/><br />
                    <input type="submit" className="btn btn-success" value="ADD"/>
                </form>
                <hr />
                { <ul className="list-group">
                  {this.props.courses.map((course, i) => this.listView(course, i))}
                </ul> }
                </div>
            </div>

        </Col>
        <Col>
          <TeacherForms></TeacherForms>
        </Col>
        </Row>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return{
    courses: state.courses
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    addCourse: course => dispatch(courseAction.addCourse(course)),
    deleteCourse: index => dispatch(courseAction.deleteCourse(index))
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

Index.js

​

import React from 'react';
import ReactDOM from 'react-dom';
//import './index.css';
import "semantic-ui-css/semantic.css"
import $ from 'jquery';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css'
import configureStore from './store/configureStore';
import { Provider } from 'react-redux';

const store = configureStore();


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')   
);

serviceWorker.unregister();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​

提前谢谢你。我也会尽我最大的努力自己解决这个问题。

Answer 1

import { Header } from 'semantic-ui-react'

只需将语义-ui-css更改为语义-ui-反应性，因为这个库是免费的。

Answer 2

在index.html( public文件夹中)的头部末尾添加CDN，并从App.js和index.js中删除它

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>

在App.js中你会做

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;
import { Header } from 'semantic-ui-css'

希望这能有所帮助

Answer 3

如果使用以下命令安装语义-ui

npm install semantic-ui-css

在index.js文件中使用以下导入

import 'semantic-ui-css/semantic.min.css';

它将删除您在react或其他javascript中的错误。