Question

我在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 / component / 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;

Answer 1

您已将路径定义错误。在AddComponent中，您已经在所需的目录中，所以只是：

import Movie from './Movie.jsx';

Answer 2

你是否错过了＆＃34; s＆＃34;在import Movie from './component/Movie.jsx的组件？

找不到模块，无法解决

2 个答案: