渲染 react-bootstrap 组件时出错答案

【问题标题】：Error rendering react-bootstrap components渲染 react-bootstrap 组件时出错
【发布时间】：2016-08-14 03:33:35
【问题描述】：

我最近从在 react 类中使用 twitter-bootstrap 迁移到使用 react-bootstrap。我想测试 react-bootstrap Navbar。我的代码如下：

import React from 'react';
import { Link } from 'react-router';
import Radium from 'radium';
import Grid from 'bootstrap-grid-react';
import * as bootstrap from "react-bootstrap";


export default class Layout extends React.Component {

    constructor() {
        super();
        this.state = {};
    }

    render() {
        let {Nav, Navbar, NavItem, NavDropdown, MenuItem} = bootstrap;
        return (
            <div>
                <Navbar>
                    <Navbar.Header>
                      <Navbar.Brand>
                        <a href="#">APITest</a>
                      </Navbar.Brand>
                    </Navbar.Header>
                    <Nav>
                      <NavItem eventKey={1} href="#">New user
                      </NavItem>
                      <NavItem eventKey={2} href="#">Create New User</NavItem>
                      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                        <MenuItem eventKey={3.1}>Action</MenuItem>
                        <MenuItem eventKey={3.2}>Another action</MenuItem>
                        <MenuItem eventKey={3.3}>Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey={3.3}>Separated link</MenuItem>
                      </NavDropdown>
                    </Nav>
                </Navbar>
            </div>

        )
    }
}

但是这给了我一个错误

未捕获的错误：不变违规：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。检查渲染方法 Layout.

还有一个警告：

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或 ReactClass（用于复合组件）。检查渲染方法 Layout.

我也尝试过使用 import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' 但它也不起作用。我使用Navbar 的方式肯定存在问题，因为普通的div 渲染得很好。

非常感谢任何帮助。

【问题讨论】：

import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' 工作得很好。
@MatthewHerbst 我也没试过。仍然出现同样的错误。

标签： javascript reactjs ecmascript-6 react-bootstrap

【解决方案1】：

在处理了太久之后，我发现问题出在您使用 react-router 的 Link 组件上。我不确定错误的具体情况，但有一个解决方案。不要使用 Link，而是使用 react-bootstrap-router https://github.com/react-bootstrap/react-router-bootstrap 提供的 LinkContainer 组件。

来自 react-router-bootstrap 文档：

npm i -S react-router-bootstrap

在您的代码中使用：

<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
  <Button>Foo</Button>
</LinkContainer>

【讨论】：

【解决方案2】：

经过很长时间的努力，我终于解决了问题是Navbar上方的额外div。

这是我的最终工作代码：

import React from 'react';
import { Link } from 'react-router';
import Radium from 'radium';
import Grid from 'bootstrap-grid-react';
import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from "react-bootstrap";


export default class Layout extends React.Component {

    constructor() {
        super();
        this.state = {};
    }

    render() {
        return (
                <Navbar>
                    <Navbar.Header>
                      <Navbar.Brand>
                        <a href="#">APITest</a>
                      </Navbar.Brand>
                    </Navbar.Header>
                    <Nav>
                      <NavItem eventKey={1} href="#">New user
                      </NavItem>
                      <NavItem eventKey={2} href="#">Create New User</NavItem>
                      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                        <MenuItem eventKey={3.1}>Action</MenuItem>
                        <MenuItem eventKey={3.2}>Another action</MenuItem>
                        <MenuItem eventKey={3.3}>Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey={3.3}>Separated link</MenuItem>
                      </NavDropdown>
                    </Nav>
                </Navbar>

        )
    }
}

在将导航栏包装在 div 中时，我仍然不知道错误的原因。如有任何解释，请随时发表评论。

【讨论】：