React - 不变违规异常
React - Invariant Violation exception
作为 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.**
在 ES6 模块和 CommonJS 模块之间进行转换时,默认导出为 default
属性。因此,您必须访问 .default
您 require
:
的值
const BasicReactComp = require('./BasicReactComp').default;
或使用 import
语法:
import BasicReactComp from './BasicReactComp';
作为 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.**
在 ES6 模块和 CommonJS 模块之间进行转换时,默认导出为 default
属性。因此,您必须访问 .default
您 require
:
const BasicReactComp = require('./BasicReactComp').default;
或使用 import
语法:
import BasicReactComp from './BasicReactComp';