Question

我仍然是新人，我正在尝试使用react和reactstrap来处理工作中的内部项目。我花了几个小时试图让NavDropdown组件工作。我已经尝试将示例代码从https://reactstrap.github.io/components/dropdowns/移植到我的项目中来测试它并构建我自己的导航，从此示例中获取提示https://codepen.io/eddywashere/pen/KgjQay?editors=0010

但是，我无法打开下拉菜单。

当我检查元素时，我可以在检查器中看到NavDropdown及其子元素。当我点击DropDown元素时，我可以看到它的state.isOpen切换为true。但是 - 下拉菜单实际上并未显示，它仍保持关闭状态。

我没有console.log错误，对于我做错了什么真的很神秘。很想在这个上学习我的错误，所以我们可以使用这个库。

以下是我尝试使用NavDropDown的标题组件：

import React from 'react';
import { Navbar, Nav, NavDropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';

class Header extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
        dropdown: false
      };
      this.dropdownToggle = this.dropdownToggle.bind(this);
   }

   dropdownToggle() {
      this.setState({
        dropdown: !this.state.dropdown
      });
   }

   render() {
       return (      
         <header>
           <Navbar color="light">
              <Nav navbar>
                <NavDropdown isOpen={this.state.dropdown} toggle={this.dropdownToggle}>
                <DropdownToggle color="primary" nav caret>
                  Dropdown
                </DropdownToggle>
                <DropdownMenu>
                   <DropdownItem>Header</DropdownItem>
                   <DropdownItem>Action</DropdownItem>
                   <DropdownItem>Another Action</DropdownItem>
                   <DropdownItem>Another Action</DropdownItem>
               </DropdownMenu>
            </NavDropdown>
         </Nav>
      </Navbar>
    </header>
  );
}


   }
      export default Header

这是App.js文件，我将标题导入：

import React from 'react';
import Header from './shared/Header';

class App extends React.Component {
  render() {
    return ( 
        <div>
          <Header/>
        </div>
    );
  }
}

export default App;`

这是我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from './comp/App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import './Index.css';

ReactDOM.render(
  <BrowserRouter><App /></BrowserRouter>, 
  document.getElementById('root')
);
registerServiceWorker();

我使用create-react-app启动项目，这是我的package.json

{
  "name": "estimator",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "node-sass-chokidar": "0.0.3",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-addons-transition-group": "^15.6.0",
    "react-burger-menu": "^2.1.4",
    "react-dom": "^15.6.1",
    "react-icons": "^2.2.5",
    "react-loading": "^0.1.4",
    "react-modal": "^2.2.4",
    "react-router-dom": "^4.1.2",
    "react-scripts": "1.0.11",
    "reactstrap": "^4.8.0",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "npm-run-all": "^4.0.2"
  }
}

Answer 1

当我从react-bootstrap（使用bootstrap 3.3.7）移动到reactstrap时，我遇到了这个问题。

即使我的package.json指示“bootstrap”：“^ 4.0.0-alpha.6”，我的配置仍在拉动3.3.7。

我删除了我的node_modules / bootstrap文件夹，安装了npm并开始工作。

也许要检查一下？

Reactstrap NavDropdown组件不会打开

1 个答案: