组件中没有导出？反应

Question

我很抱歉浪费人们的时间在这样一个愚蠢的错误上。但这让我发疯，我不知道为什么会这样。据我所知，我所做的一切都是正确的。所以我试图将一个名为NewSiteNav 的组件导入到我的NewSite 组件中。我指向的路径是正确的，我什至知道，因为我使用的 VSC 工具可以帮助您自动完成路径选择。我正确编写了导入，在有和没有这些{} 的情况下都尝试过，并且我已经正确地在开头使用export default class... 和最后使用export default NewSiteNav 导出了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'

如果此解决方案对您不起作用，请尝试将 extends 从 Component 更改为 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 导入的说明。