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

我是reactjs新手，我正在一个项目中使用它。我在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>
      );
    }
  }

但我得到了一个错误：

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';

---

如果您的文件只导出一个值，那么最好坚持使用默认导出。

在我将export语句更改为destructuring表单后，它可以正常工作，非常感谢您对编码约定的详细解释和建议：]我希望能够在没有扩展名的情况下执行

/b

，但babel找不到jsx文件。有没有办法做到这一点？只需在文件上使用

.js

扩展名？@DanPrince我在ReactJS.net asp.net core 3.1应用程序中也有类似的问题。Aldo我已经按照您的指示进行了操作，并尝试了一些排列，只要我使用export或import，我的jsx类就不会执行。我错过了什么？除了一颗心。

export class A extends React.Component {

}

import { A } from './a.jsx';