为什么我不能将我的组件导入 React JS 中的另一个组件？答案

【问题标题】：Why can't i import my component to another component in React JS?为什么我不能将我的组件导入 React JS 中的另一个组件？
【发布时间】：2021-10-07 20:21:27
【问题描述】：

我正在尝试将我的 ProgressBar 组件导入到我的 UploadForm 组件，但它不起作用。控制台宣布错误为：“./src/components/UploadForm.js 未找到模块：无法解析 'C:\Users\Admin\react-website\src\components' 中的 './components/ProgressBar'”。我不知道出了什么问题？谁能帮帮我? 非常感谢！

这是我的 ProgressBar.js：

import React from "react";
import useStorage from "../hooks/useStorage";

const ProgressBar = () => {
    return ( <
        div className = "progress-bar" > progress < /div>
    )
};

export default ProgressBar;

这是我的 UploadForm.js：

import React, { useState } from "react";
import ProgressBar from "./components/ProgressBar";

const UploadForm = () => {
  const [file, setFile] = useState(null); //to begin with we dont select a file

  const types = ["image/png", "image/jpeg"];

  const [error, setError] = useState(null);

  const changeHandler = (e) => {
    let selected = e.target.files[0];

    if (selected && types.includes(selected.type)) {
      setFile(selected);
      setError("");
    } else {
      setFile(null);
      setError("pls select an image file (png or jpeg)");
    }
  };

  return (
    <form>
      <input type="file" onChange={changeHandler} />{" "}
      <div className="output">
        {" "}
        {error && <div className="error"> {error} </div>}{" "}
        {file && <div> {file.name} </div>}{" "}
        {file && <ProgressBar file={file} setFile={setFile} />}{" "}
      </div>{" "}
    </form>
  );
};
export default UploadForm;

这是我的 useStorage.js：

import {
    useState,
    useEffect
} from 'react'
import {
    projectStorage
} from "../firebase/config"

const useStorage = (file) {
    const [progress, setProgress] = useState(0)
    const [error, setError] = useState(null)
    const [url, setURL] = useState(null)

    //going to fire everytime the dependency(file) changes
    useEffect(() => {
        //references
        const storageRef = projectStorage.ref(file.name)

        storageRef.put(file).on('state_changed', (snap) {
            let percentage = (snap.bytesTransferred / snap.totalBytes) * 100
            setProgress(percentage)
        }, (err) => {
            setError(error)
        }, async() => {
            const url = await storageRef.get.DownloadURL()
            setUrl(url)
        })

    }, [file]);

    return {
        progress,
        url,
        error
    }

}

export default useStorage;

【问题讨论】：

标签： reactjs import components use-effect use-state

【解决方案1】：

import ProgressBar from "./components/ProgressBar";

. 表示当前目录，UploadForm.js 在 src/components 目录下。所以这条线试图访问不存在的src/components/components/ProgressBar。将其更改为：

import ProgressBar from './ProgressBar";

【讨论】：