Question

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { logout } from '../actions/authActions';
import { Navbar, NavItem, NavDropdown, MenuItem, Nav } from 'react-bootstrap';

class NavigationBar extends React.Component {
  logout(e) {
    e.preventDefault();
    this.props.logout();
  }

  render() {
    const { isAuthenticated } = this.props.auth;
    const userLinks = (
        <div>
            <Nav>
                <NavDropdown eventKey={1} title="Brokerage" id="basic-nav-dropdown">
                    <MenuItem conn/>
                    <MenuItem eventKey={1.1}><Link to="/brokerageList">Brokerage List</Link></MenuItem>
                    <MenuItem eventKey={1.2}><Link to="/addBrokerage">Add Brokerage</Link></MenuItem>
                    <MenuItem eventKey={1.3}><Link to="/report">Report</Link></MenuItem>
                    <MenuItem eventKey={1.3}><Link to="/websiteRequests">Website Requests</Link></MenuItem>
                </NavDropdown>

                <NavDropdown eventKey={2} title="Brokerage Settings" id="basic-nav-dropdown">
                    <MenuItem eventKey={2.1}><Link to="/membershipsAccess">Memberships Access</Link></MenuItem>
                    <MenuItem eventKey={2.2}><Link to="/crmMaintainence">CRM Maintainence</Link></MenuItem>
                    <MenuItem eventKey={2.3}><Link to="/helpSupport">Help & Support</Link></MenuItem>
                    <MenuItem eventKey={2.4}><Link to="/brokerageSettings">Brokerage CAP Settings</Link></MenuItem>
                    <MenuItem eventKey={2.5}><Link to="/websiteVideo">Website video</Link></MenuItem>
                </NavDropdown>

                <NavItem eventKey={3} ><Link to="/profile">Profile</Link></NavItem>
            </Nav>

            <Nav pullRight>
                <NavItem eventKey={4}><a onClick={this.logout.bind(this)}>Logout</a></NavItem>
            </Nav>
        </div>
      );

    const guestLinks = (
        <Nav pullRight>
            <NavItem eventKey={5} ><Link to="/login">Login</Link></NavItem>
        </Nav>
    );

    return(
        <Navbar inverse collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    <Link to="/">Home</Link>
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>

            <Navbar.Collapse>
                { isAuthenticated ? userLinks : guestLinks }
            </Navbar.Collapse>
        </Navbar>
    );
  }
}

NavigationBar.propTypes = {
  auth: React.PropTypes.object.isRequired,
  logout: React.PropTypes.func.isRequired
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

export default connect(mapStateToProps, { logout })(NavigationBar);

这是我的导航脚本，当我加载导航栏时遇到一些错误。

**错误1 - （登录前）

警告：validateDOMNesting（...）：不能作为后代出现。见NavigationBar＆gt; NavItem＆gt; SafeAnchor＆gt; a＆gt; ...＆gt;链接＆gt;一个。**

**错误2 - （登录后）

bundle.js：1333警告：标记上的未知道具conn。从元素中删除此prop。有关详情，请参阅     警告：validateDOMNesting（...）：不能作为后代出现。见NavigationBar＆gt; MenuItem＆gt; SafeAnchor＆gt; a＆gt; ...＆gt;链接＆gt;一个。     警告：validateDOMNesting（...）：不能作为后代出现。见NavigationBar＆gt; NavItem＆gt; SafeAnchor＆gt; a＆gt; ...＆gt;一个。**

当我使用react-bootstrap导航栏我遇到了NavItem和MenuItem

0 个答案: