在 React.js 中导出组件时出错答案

【问题标题】：Error while exporting Component in React.js在 React.js 中导出组件时出错
【发布时间】：2019-11-06 14:48:34
【问题描述】：

我正在将 React.js 组件 (Comp.jsx) 导出到 App.js（主文件）和得到这个错误。

错误：./src/App.js 尝试导入错误：“./Components/Comp.jsx”不包含默认导出（导入为“Comp”）。

Comp.jsx

import React from 'react'
import ReactDOM from 'react-dom'
function MyInfo() {

    return (
        <div>
            <h1>My Name</h1>
            <p>This is a Para</p>
        </div>
    )
}
ReactDOM.render(<MyInfo/>,document.getElementById('root'))

App.js

import React from 'react';
import Comp from './Components/Comp.jsx';


function App() {
  return (
    <Comp>Hello World</Comp>
  );
}

export default App;

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您还必须导出 MyInfo 组件。 MyInfo 组件/函数仅被声明而不被导出。放

export default MyInfo

在 Comp.jsx 文件的底部或

export default function MyInfo()...

函数的声明位置 .这样可以导入 MyInfo 组件并在其他文件中使用。此外，ReactDOM.render 必须在 App.jsx 文件中。见https://codesandbox.io/s/reverent-fermi-44r26

【讨论】：

我看不到任何 MyInfo.jsx 文件。在 Comp.jsx 中尝试了“导出默认 MyInfo”，但仍然出现相同的错误。
我已经编辑了我的答案...当您添加导出默认值时会发生什么？组件文件夹的路径是否正确？
是的，我已经尝试了'export default MyInfo'，但错误仍然相同。另外，路径是正确的。
codesandbox.io/embed/reverent-fermi-44r26 。渲染必须在 App 组件中
好的，知道了。谢谢！

【解决方案2】：

代替：

ReactDOM.render(<MyInfo/>,document.getElementById('root'))

将其移至App.js 文件并渲染App。

App.js

ReactDOM.render(<App/>,document.getElementById('root'))

或

在Comp.jsx 中添加export default。

Comp.jsx

import React from 'react'
import ReactDOM from 'react-dom'

// \/ here
export default function MyInfo() {

    return (
        <div>
            <h1>My Name</h1>
            <p>This is a Para</p>
        </div>
    )
}
ReactDOM.render(<MyInfo/>,document.getElementById('root'))

【讨论】：