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

Question

我是新来的reactjs，我在electron项目中使用它。我在a.jsx定义的组件，A和B分别b.jsx使用的语法如下：

//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> 

我怎么能参考分量A组件B中的A（例如，如上面b.jsx中所示，在B的渲染函数中使用A标签）？我试着添加：

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

这是一个好主意，从混合与老CommonJS的风格（require，module.exports）新模块的语法（import，export）望而却步。

如果您的文件只导出一个组件，那么您可以使用默认导出。

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

如果你的文件只有一个出口值它可能是一个好主意，坚持为默认出口。