Javascript 呈现引导组件时出错

我最近已经从在react类中使用twitter引导迁移到使用react引导。我想测试一下react引导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>

        )
    }
}

从“React”导入React；
从“反应路由器”导入{Link}；
从“镭”进口镭；
从“引导网格反应”导入网格；
从“react bootstrap”导入*作为引导；
导出默认类布局扩展React.Component{
构造函数（）{
超级（）；
this.state={}；
}
render（）{
设{Nav，Navbar，NavItem，NavDropdown，MenuItem}=bootstrap；
返回(
新用户
创建新用户
行动
另一个动作
还有别的吗
分离环
)
}
}

然而，这给了我一个错误

未捕获错误：不变冲突：元素类型无效： 应为字符串（用于内置组件）或类/函数（用于 复合组件）但得到：未定义。检查的渲染方法

布局

以及警告：

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

布局

我也试过使用

---

从'react bootstrap'导入{Nav、Navbar、NavItem、NavDropdown、MenuItem}

但它也不起作用。我如何使用

Navbar

肯定有问题，因为普通div的渲染效果很好

---

非常感谢您的帮助。

经过长时间的努力，我终于让它工作了。

导航栏上方的额外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>

        )
    }
}

从“React”导入React；
从“反应路由器”导入{Link}；
从“镭”进口镭；
从“引导网格反应”导入网格；
从“react bootstrap”导入{Nav、Navbar、NavItem、NAVDROPOLDOWN、MenuItem}；
导出默认类布局扩展React.Component{
构造函数（）{
超级（）；
this.state={}；
}
render（）{
返回(
新用户
创建新用户
行动
另一个动作
还有别的吗
分离环
)
}
}

---

我仍然不知道将导航栏包装到div中时出错的原因。请随意评论任何解释。

在处理此问题太久之后，我发现问题在于您使用的react router中的链接组件。我不完全确定错误的具体细节，但有一个解决方案。不要使用Link而是使用react引导路由器提供的LinkContainer组件

从react路由器引导文档：

npm i -S react-router-bootstrap

在代码使用中：

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

福

从“react bootstrap”导入{Nav、Navbar、NavItem、NavDropdown、MenuItem}

效果非常好。@MatthewHerbst没有。我也试过了。还是有同样的错误。