元素类型无效：应为字符串 (...) 但得到：对象

Question

应用程序.js

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

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;

      }

}

export default Car;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

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

我收到错误：错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 的渲染方法HotExportedComponent。

我知道导入指向正确的类。当我第一次在本地运行时，浏览器中会显示所需的文本“嗨，我是一辆车！”。然后大约半秒钟后，错误弹出。我认为这与错误消息中指示的热重载有关。我也为此使用 Gatsby。

Answer 1

Gatsby 使用 React 的内置解析，您不需要像独立的 React 应用程序一样ReactDOM在index.js页面中导入。只是：

import React from 'react';
// import ReactDOM from 'react-dom'; //remove it
import Car from './App.js';

const Index = ()=>{
   return <Car/>
}

export default Index;