React - 不变违规异常

Question

作为 React 的新手，我遇到了一些看似非常简单的事情。不确定哪里做错了。

我有一个这样的组件 BasicReactComponent.js：

import React from 'react';

const BasicReactComp = () => {
  console.log('hi');
  return (
    <div>
      I was loaded from basic react comp.
    </div>
  );
};

export default BasicReactComp;

我正在尝试在我的主文件中调用它，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
const BasicReactComp = require('./BasicReactComp');

ReactDOM.render(
 <BasicReactComp />,
 document.getElementById('foo')
);

我不断收到以下错误

**Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.**

Answer 1

在 ES6 模块和 CommonJS 模块之间进行转换时，默认导出为 default 属性。因此，您必须访问 .default 您 require:

的值

const BasicReactComp = require('./BasicReactComp').default;

或使用 import 语法：

import BasicReactComp from './BasicReactComp';

React - 不变违规异常

React - Invariant Violation exception

javascript

reactjs

react-component

react-dom