错误呈现反应
我最近从在反应类中使用twitter-bootstrap迁移到使用react-bootstrap。 我想测试react-bootstrap导航栏。 我的代码是这样的：
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，undefined，boolean或number。 它应该是一个字符串（用于DOM元素）或ReactClass（用于复合组件）。 检查Layout的渲染方法。
我也尝试import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap'使用import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap'但它也不起作用。 在我如何使用Navbar肯定存在一个问题，因为正常的div渲染得很好。
任何帮助真的很感激。
在处理了这个过程之后，我发现问题在于你使用react-router的Link组件。 我并不确定错误的具体细节，但有一个解决方案。 使用react-bootstrap-router https://github.com/react-bootstrap/react-router-bootstrap提供的LinkContainer组件，而不是使用Link 。
从react-router-bootstrap文档：
npm i -S react-router-bootstrap
在你的代码中使用：
<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
<Button>Foo</Button>
</LinkContainer>
经过很长一段时间的努力后，我终于找到了解决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中时，我仍然不知道出现错误的原因。 随意评论任何解释。
链接地址: http://www.djcxy.com/p/52177.html