Question

我正在尝试创建一个React App。到目前为止，我的尝试很大程度上基于create-react-app中的默认应用程序。这是我的App.js：

import React from 'react';
import './App.css';
import './Components/MyComponent';

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

export default App;

MyComponent在这里定义：

import React from 'react';
import img from './Assets/img.png';
import imgComponent from './MyImage';

class MyComponent extends React.Component {
    render() {
      return
        <div>
            <imgComponent imageProp={img} />

        </div>
    }
}

export default MyComponent;

运行此命令时，出现错误：

./src/App.js
  Line 8:  'MyComponent' is not defined  react/jsx-no-undef

请有人告诉我为什么会出现此错误？我的印象是，使用该组件只需要将App.js中的import和export default中的MyComponent组合在一起即可。

Answer 1

在App.js中，您将MyComponent添加到了render方法，但是MyComponent没有在代码中定义（如错误消息所示）。

只需更改您的第三次导入：

import './Components/MyComponent';

收件人：

import MyComponent from './Components/MyComponent';

因此，您在渲染功能中获得了要使用的组件。

希望对您有帮助！

Answer 2

当我们做export default Mycomponent时，我们将Mycomponent模块暴露给其他模块。但是我们需要使用本地名称来访问内容。对于默认导出，它不必与导出相同。一个简单的import语句应类似于import name from 'module'。就您而言，它将是

import MyComponent from './Components/MyComponent'。

反应无法找到组件

2 个答案: