渲染反应引导组件时出错 [英] Error rendering react-bootstrap components

问题描述

我最近已经从使用twitter-bootstrap的反应类迁移到使用react-bootstrap。我想测试反应引导Navbar。我的代码是：

  import从react 
 import {link} from'react-router'; 
进口镭镭; 
从引导网格反应导入网格; 
 import *作为引导来自react-bootstrap; 
 
 
导出默认类布局扩展React.Component {
 
构造函数（）{
 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 =＃>新用户
< / NavItem> 
< NavItem eventKey = {2} href =＃>创建新用户< / NavItem> 
< NavDropdown eventKey = {3} title =Dropdownid =basic-nav-dropdown> 
< MenuItem eventKey = {3.1}> Action< / MenuItem> 
& MenuItem eventKey = {3.2}>另一个动作< / MenuItem> 
< MenuItem eventKey = {3.3}>此处的其他内容< / MenuItem> 
< ; MenuItem divider /> 
< MenuItem eventKey = {3.3}>分离链接< / MenuItem> 
< / NavDropdown> 
< / Nav> 
< / Navbar> 
< / div> 
 
）
} 
} 
  

但是给我一个错误

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

和一个警告：

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

我也试过从'react-bootstrap'使用
import {Nav，Navbar，NavItem，NavDropdown，MenuItem}，但它也不会工作。因为正常的div渲染很好，所以我使用 Navbar 是一个问题。

非常感谢任何帮助。

解决方案

太长时间了，我发现问题是您从反应路由器使用的链接组件。我不完全确定错误的细节，但有一个解决方案。而不是使用链接，使用由 react-bootstrap-router LinkContainer 组件-bootstrap / react-router-bootstraprel =nofollow> https://github.com/react-bootstrap/react-router-bootstrap 。

从反应路由器引导文档：

  npm i -S反应路由器引导
  

在代码中使用：

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

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>

这篇关于渲染反应引导组件时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！