Reactjs 如何在React Js中导入组件？

我有一个找不到模块的错误。我认为这样的错误是因为缺少文件或目录。然而，我已经在那个特定的位置检查了30多次，即使是打字错误，我也不认为我在这里有任何错误

这是我的dishdailcomponent.js代码

import React,{Component} from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, CardBody, CardText} from 'reactstrap';

 class Dishdetail extends Component{
  constructor(props){
   super(props);
}
render(){
 if(this.props.dish!=null){
  return(
        <div className="container">
           <div className="row">
             <div className="col-12 col-md-5 m-1">
                <Card>
                  <CardImg width="100%" object src={dish.image} alt={dish.name} />
                  <CardBody>
                  <CardTitle>{dish.name}</CardTitle>
              <CardText>{dish.description}</CardText>
                  </CardBody>
                 </Card>
             </div>
           </div>
        </div>
)    
          }
           else{
            return <div></div>
           }

     }
   }
  export default Dishdetail;

---

我要导入的文件和将接收的文件位于同一文件夹组件中。

鉴于您提供的文件夹结构，menuComponent和

dishdailcomponent

不在同一文件夹中吗？也许您需要将导入行更改为

import Dishdetail from './DishdetailComponent';

---

因为这是调用导入的文件的相对路径。

鉴于您提供的文件夹结构，

menuComponent

和

dishdailcomponent

不在同一文件夹中吗？也许您需要将导入行更改为

import Dishdetail from './DishdetailComponent';

---

因为这是调用导入的文件的相对路径。

您已将MenuComponent和DishDetail组件放在同一文件夹中，因此可以执行以下操作

import Dishdetail from "./DishdetailComponent"

您应该使用相对路径，因为两个组件位于同一文件夹中，并且

/

告诉程序查找当前文件所在的文件夹。当您在Components文件夹中的MenuComponent中使用

/

时，

/

会查看Components文件夹中的内容

---

/Components/DishdetailComponent

搜索MenuComponent所在文件夹中的Components目录，由于该文件夹中没有此类目录，因此会引发错误。

您已将MenuComponent和DishDetail组件放在同一文件夹中，因此可以执行以下操作

import Dishdetail from "./DishdetailComponent"

您应该使用相对路径，因为两个组件位于同一文件夹中，并且

/

告诉程序查找当前文件所在的文件夹。当您在Components文件夹中的MenuComponent中使用

/

时，

/

会查看Components文件夹中的内容

---

/Components/dishdailcomponent

在MenuComponent所在的文件夹中搜索Components目录，由于该文件夹中没有此类目录，因此会抛出一个错误。

两个文件似乎处于同一级别 试用

---

从“/dishdailcomponent”导入dishdail
两个文件似乎处于同一级别
试用

从“/dishdailcomponent”导入dishdail
通过查看文件夹结构

这两个组件都在同一目录中

然后，您必须将其作为

import Dishdetail from "./DishdetailComponent";

为了避免这种导入开销，您可以通过在根目录中添加一个jsconfig.json文件来简化它，并进行如下配置

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
  }

这是为了指定一个绝对导入路径，现在您可以像

import Dishdetail from "Components/DishdetailComponent";

通过查看文件夹结构

这两个组件都在同一目录中

然后，您必须将其作为

import Dishdetail from "./DishdetailComponent";

为了避免这种导入开销，您可以通过在根目录中添加一个jsconfig.json文件来简化它，并进行如下配置

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
  }

这是为了指定一个绝对导入路径，现在您可以像

import Dishdetail from "Components/DishdetailComponent";

在
Menucomponent.js
文件中，它必须是
import dishdail from./dishdailcomponent'不是这样工作的！在
Menucomponent.js
文件中，它必须是
import dishdail from./dishdailcomponent'不是这样工作的！看看其他答案。您确定发送的文件结构正确吗？请查看其他答案。你确定你发送了正确的文件结构吗？不是这样的不是这样的