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>

        )
    }
}

然而这给了我一个错误

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

并发出警告：

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

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

非常感谢任何帮助。

Answer 1

经过太长时间处理此问题后，我发现问题是 react-router 中使用的链接组件。我不确定错误的具体细节，但有一个解决方案。不使用链接，而是使用 react-bootstrap-router https://github.com/react-bootstrap/react-router-bootstrap提供的 LinkContainer 组件。

来自react-router-bootstrap docs：

npm i -S react-router-bootstrap

在您的代码中使用：

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

Answer 2

After a long time struggling with it, I finally got it to work the problem being the extra div above the Navbar.

This is my Final working code:

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>

        )
    }
}

I still don't know the reason for an error when wrapping the Navbar in a div. Feel free to comment for any explanation.

呈现react-bootstrap组件时出错

2 个答案: