React报错：'MyComponent'未定义，请求排查问题原因

你在基于create-react-app搭建项目时遇到的'MyComponent' is not defined报错，问题其实出在App.js的组件导入语句写法上。

先看你原来的导入代码：

import './Components/MyComponent';

这种写法只是让React执行MyComponent.js里的代码，但并没有把文件中export default导出的组件绑定到一个变量上。所以当你在App组件的JSX里写<MyComponent/>时，JavaScript找不到名为MyComponent的变量，自然就报了未定义的错误。

解决办法 #

修正App.js里的导入语句，给默认导出的组件指定一个接收变量（通常和组件名保持一致）：

import React from 'react';
import './App.css';
// 这里改为带变量接收的导入方式
import MyComponent from './Components/MyComponent';

function App() {
  return (
    <div className="App">
      <MyComponent/>
    </div>
  );
}
export default App;

简单来说：

• 当你用export default导出组件时，必须用import 组件名 from '文件路径'的语法来接收，这样组件变量才会被注册到当前文件的作用域中，才能在JSX里正常使用。

另外顺便提一句，你MyComponent里的imgComponent最好首字母大写（改成ImgComponent），这是React组件的命名规范，避免和原生HTML标签混淆哦～

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