如何在反应中导入子组件？

Question

外部包含的组件和外部文件

  class NavigationBarContainer extends React.PureComponent {
 render = () => <NavigationBar extraBanner={<Banner 
   />} {...this.props} />

}

在我的应用中

   import NavigationBar from '../components/NavigationBar'

    <NavigationBar
      extraBanner />

好像没用

  import NavigationBarContainer from '../components/NavigationBar'
     <NavigationBarContainer {...this.props}>

下面出现错误似乎不起作用

**Invalid prop extraBanner of type boolean supplied to NavigationBar, expected a single ReactElement.**

Answer 1

这里有两个可能的问题。

1) NavigationBarContainer 未导出，因此无法导入。

您可以通过以下两种方式之一导出类来解决此问题 - 更改类声明以包含 export 关键字

export default class NavigationBarContainer extends React.PureComponent

或在该文件的底部添加一行

export default NavigationBarContainer;

2) 您正尝试从名为 NavigationBar 的文件中导入名为 NavigationBarContainer 的组件。如果该文件名为NavigationBarContainer，那么这将不起作用。确保您的文件名正确。

---

export 与 export default 和导入的快速总结

export default

默认导出在导入时可以任意命名，例如。

// components/MyComponent.js
export default class MyComponent extends React.Component {...}

// AnotherFile.js
import MyComponent from 'components/MyComponent'; // works
import WhateverName from 'components/MyComponent'; // also works

export

当您不使用 default 关键字时，您将进行命名导出。这些必须直接按名称导入，使用以下语法：

// components/SmallComponents.js
export class SmallComponent1 extends React.Component {...}
export class SmallComponent2 extends React.Component {...}

// AnotherFile.js
import {SmallComponent1, SmallComponent2} from 'components/SmallComponents'; // works
import SmallComponent1 from 'components/SmallComponents' // does not work
import {WhateverName} from 'components/SmallComponents' // does not work

希望这会有所帮助！