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）您正尝试从名为NavigationBarContainer的文件中导入名为NavigationBar的组件。如果该文件被称为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

希望这有帮助！

如何导入子组件做出反应？

1 个答案: