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

您似乎位于import os path = 'path_of_folder/F26/' files = [] # r=root, d=directories, f = files for r, d, f in os.walk(path): for file in f: if '.txt' in file: files.append(os.path.join(r, file)) for f in files: src = f.split('/') os.rename(f, path + src[-2]+'-'+src[-1]) if not os.listdir(path+src[-2]): os.rmdir(path+src[-2]) else: pass的{{1}}目录中。

如果您想从containers访问Restorans.js，则必须上移两层，再移出Restoran.js，因此将components中的导入内容更改为：

containers

containers/Restorans.js部分会将您上移两个文件夹，从而将您带到import Restoran from "./../../components/Restoran/Restoran";和../../作为子目录/子目录的根父目录。

就CSS而言，通常在规范化器/ CSS重置后，从根containers组件中将其导入一个位置。

Answer 2

首先，（只是一个建议）尝试不要使用相同的文件名。我在Restoran和Restorans中都看到Restorans.module.css。这样做可能会很笨拙。接下来是如果要导入css文件

import "../Restoran/Restoran.module.css"

或其他任何特定元素

import {classes} from "../Restoran/Restoran.module.css"

此外，如果您正在使用Restoran.js，则将路径检查为

"../../components/Restoran/Restoran"

..->更改为root，然后从那里可以更改文件夹并访问所需的组件。

Answer 3

您使用了错误的相对路径（在Restorans.js中），尝试：

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

您还可以将aliases设置为具有绝对路径（从'@ components / Restoran / Restoran'导入Restoran）

Answer 4

将路径定义为'./../../components/Restoran/Restoran'应该会有所帮助。

反应：无法从文件夹导入javascript类

4 个答案: