呈现react-bootstrap组件时出错

Question

我最近从使用反应类中的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>

        )
    }
}

但是这给了我一个错误

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

和警告：

警告：React.createElement：type不应为null，undefined，boolean或number。 它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。 检查Layout的render方法。

我也尝试使用import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap'但它也不起作用。 我如何使用Navbar肯定存在问题，因为正常的div正好渲染。

任何帮助都非常感谢。

Answer 1

在处理了这个问题的时间过长之后，我发现问题是你在react-router中使用的链接组件。 我不确定错误的具体细节，但有一个解决方案。 而不是使用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>

Answer 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中包装Navbar时，我仍然不知道出错的原因。 如有任何解释，请随时发表评论。