我在 React 上遇到错误,我有一个名为 movie 的类组件,但找不到模块,因此 webpack 中的 React 无法编译,尽管该组件位于正确的路径上。
这是组件
import React, {Component} from 'react';
class Movie extends Component{
render(){
return(
<div onClick={this.props.deleteMethod}>
{this.props.text}
</div>
);
}
}
export default Movie;
这是导入(其中需要组件但未找到): (在:./src/components/AddComponent.jsx)
import React,{Component} from 'react';
import Movie from './component/Movie.jsx';
class AddComponent extends Component {
constructor(props){
super(props);
this.state = {
movieText: '',
movies: [],
};
}
updateMovieText(movieText){
this.setState({movieText: movieText.target.value})
}
addMovie(){
if(this.state.movieText === ''){return}
let moviesArr = this.state.movies;
moviesArr.push(this.state.movieText);
this.setState({movieText: ''})
this.textInput.focus();
}
handleKeyPress = (event) => {
if(event.key === 'Enter'){
}
}
deleteMovie(index) {
let movieArr = this.state.movies;
movieArr.splice(index,1);//remove the movie from array
this.setState({movies: movieArr})
}
render(){
let movie = this.state.movie.map((val,key)=> {
return <Movie key={key} text={val} deleteMethod={() => this.deleteMovie(key)} />
});
return (
<div>
<input type="text"
ref={((input)=>{this.textInput = input;})}
value={this.state.movieText}
onChangeText={movieText => this.updateMovieText(movieText)}
onKeyPress={this.handleKeyPress.bind(this)}
/>
<button onClick={this.addMovie.bind(this)}>Add</button>
</div>
);
}
}
export default AddComponent;
最佳答案
您定义的路径错误。在 AddComponent 中,您已经位于所需的目录中,所以就是:
import Movie from './Movie.jsx';
关于javascript - 找不到模块,无法解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47116747/