在组件没有出口？应对

Question

我很浪费别人的时间就这么愚蠢的错误很遗憾。但它快把我逼疯了，我不知道为什么它的发生。据我所知，我所做的一切是正确的。所以我试图导入一个名为NewSiteNav到我NewSite组成部分。我引导到的路径是正确的，我知道，因为我使用的VSC工具，可以帮助你自动完成路径选择。我有进口编写正确，有没有这些{}尝试过了，我已经出口了NewSiteNav正确使用这两种export default class...在开始和export default NewSiteNav底。请帮忙

NewSiteNav组件：

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap'

export default class NewSiteNav extends Component {
    render() {
        return (
                <div>
                    <Navbar>
                        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="mr-auto">
                                <Nav.Link href="#home">Home</Nav.Link>
                                <Nav.Link href="#link">Link</Nav.Link>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
        )
    }
}

NewSite组件：

import React, { Component } from 'react'
import { NewSiteNav } from '../components/NewSiteNav';

class NewSite extends Component {
  render () {
    return (
      <div className="App">
        <NewSiteNav />
        <div className="lander">
          <h1>New Site</h1>
        </div>
      </div>
    )
  }
}

export default NewSite;

Answer 1

尝试改变

import { NewSiteNav } from '../components/NewSiteNav';

至

import NewSiteNav from '../components/NewSiteNav';

Answer 2

试着重写子组件NewSiteNav组件：

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap'

   export class NewSiteNav extends Component {
        render() {
            return (
                    <div>
                        <Navbar>
                            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav" />
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#home">Home</Nav.Link>
                                    <Nav.Link href="#link">Link</Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Navbar>
                    </div>
            )
        }
    }

    export default NewSiteNav

如果它不能帮助你听起来检查你盘旋循环export/import文件。也许他们中的一些，当你尝试在其他文件中使用它仍然没有加载。检查这个帖子：Redux/React. You must pass a component to the function returned by connect. Instead received undefined

Answer 3

当您

export default class NewSiteNav extends Component

你可以用任何你想要的名称导入

import foooName from './path'

但是当你做你

export class NewSiteNav extends Component

请确保你使用正确的名称将其导入

import newStireNave from './path'

如果这个解决方案并不为你工作，尝试改变从延伸到组件React.Component

export default class NewSiteNav extends React.Component{
        render() {
            return (
                    <div>
                        <Navbar>
                            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav" />
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#home">Home</Nav.Link>
                                    <Nav.Link href="#link">Link</Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Navbar>
                    </div>
            )
        }
    }

Answer 4

尝试导出您的组件这样的

class NewSiteNav extends Component { ... }
export default NewSiteNav

并导入这样的

import NewSiteNav from '../components/NewSiteNav';

看看this answer约ES6进口更多的解释。