Question

我是新的反应者，我在electron项目中使用它。我使用以下语法分别在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';

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

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

1 个答案: