React-不变冲突异常[重复]

Question

作为一个新的反应者，我被一些看似简单的事情所困扰。不知道我做错了什么。

我有一个组件BasicReactComponent。我喜欢这样：

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模块和通用JS模块之间转换时，默认导出将作为默认属性导出。因此，您必须访问的默认值，您需要：

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

或者使用import语法：

import BasicReactComp from './BasicReactComp';