javascript - 元素类型无效 : expected a string (. ..) 但得到:对象

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;

index.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 的内置解析，您不需要导入 ReactDOM在您的 index.js页面就像一个独立的 React 应用程序。只是:

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

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

export default Index;