[英]Error rendering react-bootstrap components
我最近從使用反應類中的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正好渲染。
任何幫助都非常感謝。
在處理了這個問題的時間過長之后,我發現問題是你在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>
經過很長一段時間的努力,我終於讓它解決了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時,我仍然不知道出錯的原因。 如有任何解釋,請隨時發表評論。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.