反应 - 不变违规异常

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模块和Commo之间进行转换时nJS模块，默认导出导出为default属性。因此，你必须访问的价值，你require的.default：

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

或者使用import语法：从

import BasicReactComp from './BasicReactComp';