我对React非常陌生,我对语义UI有疑问。
[我正在学习一个教程,其中我必须通过包括在App.js中使用语义UI的Header组件
从'semantic-ui-css'导入{标头}。
但是,只要页面使用此代码编译,它就会不断返回如下错误消息:
ReferenceError:未定义jQuery
./ 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 | *#语义UI 2.4.1-表单验证
在寻找解决方案时,我阅读了许多建议来运行
“ npm install -s jquery”这样,但是它仍然返回相同的错误消息。
如果能为我应该做的事情提供帮助,我将非常感激。
我认为文件中与该问题有关的部分:
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, { 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);
Index.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();
非常感谢您。我也将尽我所能来解决这个问题。
<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'