Question

我将https://react-bootstrap.github.io/components/navbar/中的react-bootstrap navbar组件的此修改版本保存在名为 navigation.js 的文件中。我已经将其导出并导入到主 App.js 文件中。但是，我仍然收到此错误：

元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

检查Navigation的呈现方法。

最奇怪的部分是错误页面指向 index.js 文件，指示该错误位于以下行：

ReactDOM.render(<App />,document.getElementById('root'));

Here是错误页面的屏幕截图。

我知道'元素类型无效'错误会发生，如果您没有正确导出组件（我这样做的话）或者您将组件名称和导入名称混合在一起。

这是 navigation.js 组件的代码：

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

class Navigation extends Component{
    render() {
        return (
            <div>
                <Navbar>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <a href="#">React-Bootstrap</a>
                        </Navbar.Brand>
                    </Navbar.Header>

                    <Nav>
                        <NavItem eventKey={1} href="#">Link</NavItem>
                        <NavItem eventKey={2} href="#">Link</NavItem>
                        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                            <NavDropdown.Item eventKey={3.1}>Action</NavDropdown.Item>
                            <NavDropdown.Item eventKey={3.2}>Another action</NavDropdown.Item>
                            <NavDropdown.Item eventKey={3.3}>Something else here</NavDropdown.Item>
                            <NavDropdown.Item divider />
                            <NavDropdown.Item eventKey={3.3}>Separated link</NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                </Navbar>
            </div>

        );
    }
}

// As you can see the component is exported perfectly
export default Navigation;

这是 App.js 文件：

import React, {Component} from 'react';
import Intro from './components/intro';
import Explore from './components/explore';
import Navigation from './components/navigation';
import './App.css';


class App extends Component{
  render(){
    return(
      <div className = 'App-header'>
          <Navigation/>
          <Intro/>
          <Explore/>
      </div>

    );
  }
}

export default App;

在您提出批评之前，我先进行研究，然后问这个问题，this是StackOverflow上最相关的问题，但是概念不同，无法回答我的问题。

Answer 1

问题在于您正在使用struct MetadataValue<T> where T: MetadataRawValue { ... }作为组件的名称并进行导出。但是，您还将从其他来源导入其他一些Nav。

您的问题是由于命名。只需更改组件的名称并导出，就可以了。

编辑：

Nav已被删除。而且我现在甚至无法在他们的文档中找到Navbar.Header。只有NavItem

如何解决“无效元素类型”错误？

1 个答案: