时间戳

首页 > 解决方案 > React-Bootstrap 无法内联对齐导航链接

reactjs - React-Bootstrap 无法内联对齐导航链接

问题描述

我试图创建导航栏，但导航链接看起来像点并且不是内联的。当我尝试 react-bootstrap 文档中给出的示例时，它是内联的。

这是我的标头组件的代码。当用户单击登录并登录时，标题组件将用户对象作为道具，我想添加名称和注销链接。

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
// NavDropdown, Form, FormControl, Button

var header = props => {
  let { user, loginClick, logoutClick } = props;
  let { name } = user;
  var navLinks =
    typeof name == 'undefined' || name === '' ? (
      <Nav.Link onClick={loginClick}>Login</Nav.Link>
    ) : (
      <div>
        <Navbar.Text> {name} </Navbar.Text>
        <Nav.Link onClick={logoutClick}>Log out</Nav.Link>
      </div>
    );

  // Here Items are not comming Inline
  return (
    <Navbar bg='light' expand='sm'>
      <Navbar.Brand href='#home'>Friends And Pets</Navbar.Brand>
      <Navbar.Toggle aria-controls='basic-navbar-nav' />
      <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='ml-auto'>{navLinks}</Nav>
      </Navbar.Collapse>
    </Navbar>
  );

  // Comes inLine

  // return (
  //     <Navbar bg="light" expand="lg">
  //         <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  //         <Navbar.Toggle aria-controls="basic-navbar-nav" />
  //         <Navbar.Collapse id="basic-navbar-nav">
  //             <Nav className="ml-auto">
  //                 <Nav.Link href="#home">Home</Nav.Link>
  //                 <Nav.Link href="#link">Link</Nav.Link>
  //                 <NavDropdown title="Dropdown" id="basic-nav-dropdown">
  //                     <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
  //                     <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
  //                     <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
  //                     <NavDropdown.Divider />
  //                     <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
  //                 </NavDropdown>
  //             </Nav>
  //             <Form inline>
  //                 <FormControl type="text" placeholder="Search" className="mr-sm-2" />
  //                 <Button variant="outline-success">Search</Button>
  //             </Form>
  //         </Navbar.Collapse>
  //     </Navbar>
  // )
};
export default header;

注意：我可以使用额外的 CSS 使其内联，但我正在尝试使用 react-bootstrap 来做到这一点

如何解决这个问题感谢任何帮助。

标签： reactjsreact-bootstrap

解决方案

额外div的可能会导致格式问题。尝试用divReact Fragment替换。

仅供参考 - 我稍微修改了您的逻辑，以包含一个最小的、可重现的示例。其他小的变化包括：

    import React, { Fragment } from 'react';
    import Nav from 'react-bootstrap/Nav';
    import Navbar from 'react-bootstrap/Navbar';

    const header = props => {
      const isLoggedIn = true;

      // Here Items are not coming Inline
      return (
        <Navbar bg='light' expand='sm'>
          <Navbar.Brand href='#home'>Friends And Pets</Navbar.Brand>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Nav className='ml-auto'>
              {isLoggedIn ? (
                <Fragment>
                  <Navbar.Text> Fake Name</Navbar.Text>
                  <Nav.Link>Log out</Nav.Link>
                </Fragment>
              ) : (
                <Nav.Link>Login</Nav.Link>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      );
    };
    export default header;

推荐阅读