javascript - react : Failed to import a JavaScript class from a folder

Question

我有一个 React 项目，这是我第一次使用它。 我在容器中有一个 JavaScript，它在组件中导入 JavaScript。

这是我的容器文件

Restorans.js

import React, { Component } from 'react';
import Restoran from "./components/Restoran/Restoran";
import classes from "./Restorans.module.css";


class Restorans extends Component{
    constructor(props){
        super(props);
        this.state = {
            restorans:
                [
                    {id:1, nama: "Restoran A", alamat: "This is address Restoran A", nomorTelepon : "0217352333"},
                    {id:2, nama: "Restoran B", alamat: "This is address Restoran B", nomorTelepon : "0217352334"},
                    {id:3, nama: "Restoran C", alamat: "This is address Restoran C", nomorTelepon : "0217352335"}
                ],
            isLoading: true


        }
    }

    componentDidMount() {
        console.log("componentDidMount()");
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate()");
    }

    loadingHandler = () => {
        const curretIsLoading = this.state.isLoading;
        this.setState({isLoading: !(curretIsLoading)});
        console.log(this.state.isLoading);
    }

    render() {
        console.log("render()")
        return(
            <React.Fragment>
                <div className={classes.Title}> All Restoran </div>
                <div className={classes.Restorans}>
                    {this.state.restorans.map(restoran =>
                    <Restoran 
                        key={restoran.id}
                        nama={restoran.nama}
                        alamat={restoran.alamat}
                        nomorTelepon = {restoran.nomorTelepon}
                        />
                    )}
                </div>
            </React.Fragment>
        );
    }

}

export default Restorans;

这是我的组件

Restoran.js

import React from "react";
import classes from "./Restoran.module.css";

const Restoran = props => {
    return(
        <div className={classes.Restoran}>
            <h3>
                {props.name}
            </h3>
            <p>
                Alamat: {props.alamat}
            </p>
            <p>
                Nomor Telepon: {props.nomorTelepon}
            </p>

        </div>
    )
}

export default Restoran;

我的文件夹库如下

当我在终端上运行 npm start 时。我收到此错误:

Module not found: Can't resolve './components/Restoran/Restoran' in 'C:\Users\[REDACTED]\projectreact\frontend-projectreact\src\containers\Restorans'

据我自己的理解，应该不会有任何错误。我尝试在末尾添加 .js 但仍然存在相同的问题。我哪里出错了？

Answer 1

您似乎位于 containers 范围内Restorans.js中的目录.

如果您想访问Restoran.js来自components ，您必须向上两级并退出 containers ，因此将您的导入更改为 containers/Restorans.js至:

import Restoran from "./../../components/Restoran/Restoran";

../../部分将带您到根父目录，其中 containers和components通过向上移动两个文件夹来作为子目录/子目录生活。

就 CSS 而言，我通常从根目录 <App/> 中的一个位置导入它。标准化器/CSS重置后的组件。