Error rendering react
I have recently migrated from using twitter-bootstrap in react classes to using react-bootstrap. I wanted to test out react-bootstrap Navbar. My code is as:
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>
)
}
}
However this gives me an error
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Layout
.
and a warning:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Layout
.
I also tried using import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap'
but it also won't work. There is definitely a problem in how I am using Navbar
because a normal div is rendering just fine.
Any help is really appreciated.
After dealing with this for way too long, I've found that the problem is the Link component you're using from react-router . I'm not exactly sure on the specifics of the error, but there is a solution. Instead of using Link use the LinkContainer component provided by react-bootstrap-router https://github.com/react-bootstrap/react-router-bootstrap.
From the react-router-bootstrap docs:
npm i -S react-router-bootstrap
In your code use:
<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
<Button>Foo</Button>
</LinkContainer>
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.
链接地址: http://www.djcxy.com/p/52178.html上一篇: 反应js从单个jsx文件导入多个组件
下一篇: 错误呈现反应