如何引用其他.jsx文件中定义的组件

Question

我是新手,我正在电子项目中使用它.我使用以下语法分别在a.jsx和b.jsx中定义了组件A和B.

  //a.jsx    
  'use babel';
  import React from 'react';
  export class A extends React.Component {
    render() {
      return (
        <div>some text</div>
      );
    }
  }

  //b.jsx   
  'use babel';
  import React from 'react'; 
  export class B extends React.Component {
    render() {
      return (
        <div>
          <A />
        </div>
      );
    }
  }

我在html页面中渲染它们:

<!-- index.html -->
<script>
var a = require('./a.jsx');
var b = require('./b.jsx');
React.render(React.createElement(b.B, null), document.body);
</script>

我怎样才能从组件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的引用,则上面的代码可以无错误地运行.

Answer 1

最好不要将新模块语法(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';

如果您的文件只导出一个值,那么坚持默认导出可能是个好主意.