React JS Sementic UI 一直说：“ReferenceError: jQuery is not defined”

Question

我对 React 很陌生，我有一个关于语义 UI 的问题。

我正在关注一个教程，其中我必须通过包含在 App.js 中使用语义 UI 的 Header 组件

    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

---

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

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

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

如果我能帮助我应该做的事情，我将不胜感激。

---

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

应用程序.js

npm install -s jquery

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);

索引.js

<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>

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();

非常感谢你。我也会尽力自己解决这个问题。

Answer 1

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

只需将语义 ui-css 更改为语义 ui-react，因为该库是 jQuery 免费的。

Answer 2

将 CDN 添加到头部末尾index.html（文件夹内）并将其从中删除publicApp.jsindex.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'

希望这可以帮助