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

还必须导出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'))

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

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

2 个答案: