Reactstrap Bootstrap Navbar 在反应应用程序中不起作用

Posted 2023-03-21

【中文标题】Reactstrap Bootstrap Navbar 在反应应用程序中不起作用

【英文标题】：Reactstrap Bootstrap Navbar not working in react app

【发布时间】：2019-06-28 10:38:45

【问题描述】：

我使用“create react-app”创建了一个反应应用程序。

我现在正在尝试从 Reactstrap 添加一个导航栏。我从 Reactstrap 复制粘贴（我将其添加为一个反应组件）website:

import React from 'react';
import 
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem  from 'reactstrap';

export default class Example extends React.Component 
  constructor(props) 
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = 
      isOpen: false
    ;
  
  toggle() 
    this.setState(
      isOpen: !this.state.isOpen
    );
  
  render() 
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick=this.toggle />
          <Collapse isOpen=this.state.isOpen navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  

它不起作用。我在我的反应应用程序中得到了这个：

我之前在使用 Bootstrap、React 和 Navbar 时遇到过类似的问题，但我真的很惊讶它会在 Reactstrap 中发生。 你知道为什么会这样吗？

【问题讨论】：

您需要按照文档reactstrap.github.io 中的说明导入css import 'bootstrap/dist/css/bootstrap.min.css';

谢谢！这行得通。我也添加了引导程序。我不知道在使用 Reactstrap 时我应该另外做。感谢您的帮助！

【参考方案1】：

你可以这样做。

import  NavLink  from 'reactstrap';
import  NavLink as ReactLink  from 'react-router-dom';

<NavLink tag=ReactLink to="/home" activeClassName="active" >Home</NavLink>

【参考方案2】：

你还需要 bootstrap 和 react-dom：

npm install --save bootstrap
npm install --save reactstrap react react-dom

---

import 'bootstrap/dist/css/bootstrap.css';
import  Button  from 'reactstrap'; 

【参考方案3】：

你应该确保你有

import 'bootstrap/dist/css/bootstrap.css';

导入到创建反应应用程序时自动创建的index.js 文件中。

【参考方案4】：

虽然没有记录，但您必须使用 react-router 如下：

<NavLink tag=Link to="/somewhere">

IE：

import React from 'react';
import  Link  from 'react-router';
import  NavLink  from 'reactstrap';

const Example = (props) => 
  return (
    <NavLink tag=Link to="/somewhere">
      props.item.name
    </NavLink>
  );
;