React新手求助：组件文件夹导入App.js的写法是否正确？

嘿，作为React新手碰到导入导出的困惑太正常了，我来帮你把这些点理清楚，顺便纠正你写法里的问题～

先说说你的写法问题 #

你提到的两个导入写法都有小问题，我逐个拆解：

1. 导入export default的App.js #

你写的import App from 'app'; 不正确，除非你在项目里配置了模块别名（比如用webpack或Create React App的jsconfig.json），否则React/Node会把'app'当成第三方包去node_modules里找，而不是你的本地文件。

正确的写法要根据你的目录结构来：假设你的目录是这样的：

source/
├── App.js （这里是export default的文件）
└── comp/
    └── YourComponent.jsx （你要在这个文件里导入App）

那在YourComponent.jsx里应该用相对路径导入：

// 因为comp是source的子文件夹，所以用../回到上一级目录找App.js
import App from '../App';
// 如果你的打包工具支持省略后缀（比如Create React App默认支持），可以不用写.js

2. 导入comp文件夹内的其他模块 #

你写的import ... from './src/comp/file.jsx' 不正确，如果当前文件已经在comp文件夹里，这个路径会去当前目录下找src/comp，这显然不是你要的。

正确的写法分两种情况：

• 导入同目录的文件：用./开头

  // 比如在comp/Header.jsx里导入comp/Button.jsx
  import Button from './Button.jsx';
  

• 导入上级目录的文件：用../开头

  // 比如在comp/child/Input.jsx里导入comp/Button.jsx
  import Button from '../Button.jsx';
  

再理清楚导出和导入的对应关系 #

React里的导出分两种，对应不同的导入方式：

默认导出（export default） #

每个文件只能有一个默认导出，导入的时候可以自定义名称：

// App.js
export default function App() {
  return <div>Hello React</div>;
}

// 导入时可以随便命名，不一定叫App
import MyApp from '../App';

命名导出（export） #

一个文件可以有多个命名导出，导入时必须用大括号包裹对应名称：

// comp/Utils.js
export const formatText = (text) => text.toUpperCase();
export const calculateSum = (a, b) => a + b;

// 导入时要对应名称
import { formatText, calculateSum } from './Utils.js';
// 也可以重命名
import { formatText as upperText } from './Utils.js';

小提示 #

如果你的项目是用Create React App创建的，它默认支持省略.jsx、.js等后缀，也可以通过创建jsconfig.json文件来配置绝对路径别名，这样你就能像import App from 'App';这样导入了，不过新手阶段先把相对路径搞明白更重要哦～

内容的提问来源于stack exchange，提问作者NNM