成为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 :(得分:2)
在ES6模块和CommonJS模块之间进行转换时,默认导出将导出为default
属性。因此,您必须访问.default
的值require
:
const BasicReactComp = require('./BasicReactComp').default;
或使用import
语法:
import BasicReactComp from './BasicReactComp';