在React.js中導出Component時出錯

Question

我正在將React.js組件（Comp.jsx）導出到App.js（主文件）並得到此錯誤。

錯誤：./ src / App.js嘗試導入錯誤：'。/ Component / 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;

Answer 1

您還必須導出MyInfo組件。 MyInfo組件/功能僅被聲明而不被導出。 放

export default MyInfo

在Comp.jsx文件的底部或

export default function MyInfo()...

聲明函數的位置。 這樣可以導入MyInfo組件並在其他文件中使用。 此外，ReactDOM.render必須位於App.jsx文件中。 請參閱https://codesandbox.io/s/reverent-fermi-44r26

Answer 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'))