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

问题描述

我正在尝试将我的ProgressBar组件导入到UploadForm组件，但它不起作用。控制台宣布错误为：“ ./src/components/UploadForm.js Module not found: Can't resolve './components/ProgressBar' in 'C:\Users\Admin\react-website\src\components' ”。不知道有什么问题？有谁能够帮我？太感谢了！

这是我的 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;

标签： reactjsimportcomponentsuse-effectuse-state

import ProgressBar from "./components/ProgressBar";

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

import ProgressBar from './ProgressBar";

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

问题描述

解决方案

推荐阅读