簡體   English   中英

呈現react-bootstrap組件時出錯

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM