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

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。

标签： javascriptreactjscomponentsgatsbyhot-reload

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;