我是新手,我正在电子项目中使用它.我使用以下语法分别在a.jsx和b.jsx中定义了组件A和B.
//a.jsx
'use babel';
import React from 'react';
export class A extends React.Component {
render() {
return (
some text
);
}
}
//b.jsx
'use babel';
import React from 'react';
export class B extends React.Component {
render() {
return (
);
}
}
我在html页面中渲染它们:
我怎样才能从组件B中引用组件A(例如在B的渲染函数中使用A标签,如上面b.jsx中所示)？我试过添加:
import A from './a.jsx'
但得到了错误:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `B`.
做正确的方法是什么？
如果在b.jsx中删除了组件A的引用,则上面的代码可以无错误地运行.
最好不要将新模块语法(import,export)与旧的commonjs样式(require,module.exports)混合在一起.
如果您的文件只导出一个组件,则可以使用默认导出.
// a.jsx
import React from 'react';
export default class B extends React.Component {
}
然后,您可以使用主文件中的导入语法引用该类.
import B from './b.jsx';
这基本上是将此模块的默认导出分配给新变量的简写B.
或者,您可以为导出多个值的模块命名导出.这实际上就是你以前所拥有的.
export class A extends React.Component {
}
这将创建一个名为的导出A,可以从具有解构导入的其他文件中引用.
import { A } from './a.jsx';
如果您的文件只导出一个值,那么坚持默认导出可能是个好主意.
京公网安备 11010802040832号 | 京ICP备19059560号-6 