Ошибка при экспорте компонента в React.js

Question

Я экспортировал компонент 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;

Answer 1

Вместо:

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

Переместите это в App.js файл и визуализируйте App.

App.js

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

OR

Добавить export default в Comp.jsx.

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

Answer 2

Вы также должны экспортировать компонент MyInfo.Компонент / функция MyInfo только объявлен и не экспортируется.Поместите

export default MyInfo

внизу файла Comp.jsx или

export default function MyInfo()...

там, где объявлена ​​функция.Таким образом, компонент MyInfo можно импортировать и использовать в других файлах.Также ReactDOM.render должен быть в файле App.jsx.Смотри https://codesandbox.io/s/reverent-fermi-44r26