2017-06-05 52 views
0

对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.** 
+0

使用'进口BasicReactComp”/BasicReactComp'' –

回答

2

当在ES6模块和Commo之间进行转换时nJS模块,默认导出导出为default属性。因此,你必须访问的价值,你require.default

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

或者使用import语法:从

import BasicReactComp from './BasicReactComp'; 
+0

#FacePalm ....谢谢你这么多...修正了它:) – prgrmr

+0

@ felix-king,你碰巧知道是否有办法我可以做这样的事情... $('#foo')。append(ReactDOM.render( , document.createElement('div') ));由于某种原因,它不工作......事情是我想要组件被呈现在一个div附加到另一个元素 – prgrmr

+0

无意中想到它:) – prgrmr