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;组件：

SELECT id, name, MIN(price) FROM (select * from table order by price) as t group by id

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'

如果此解决方案对您不起作用，请尝试将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

尝试这样导出您的组件

await

然后这样导入

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

请查看this answer，以获取有关ES6导入的更多说明。

没有组件出口？反应

4 个答案: