React JS Sementi c UI продолжает говорить: «ReferenceError: jQuery не определено» - PullRequest
Новая
       5

React JS Sementi c UI продолжает говорить: «ReferenceError: jQuery не определено»

3 голосов
/ 12 марта 2020

Я очень новичок в React, и у меня есть вопрос, касающийся Semanti c UI.

Я следую учебному пособию, в котором я должен использовать компонент Header Semanti c UI в приложении. js, включая 

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

, поэтому я сделал, но он все еще возвращает то же сообщение об ошибке.

Буду очень признателен, если смогу помочь с тем, что мне следует делать.

Вот части моих файлов, которые, я думаю, связаны с этой проблемой:

Приложение. 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, { 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();

Большое спасибо заранее. Я также буду стараться изо всех сил, чтобы понять это самостоятельно.

1 Ответ

3 голосов
/ 12 марта 2020

Добавьте CDN в index.html (внутри папки public) в конце головки и удалите его из 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'

Надеюсь, это поможет

...