0

我还是新手，我正在尝试将 react 和 reactstrap 用于工作中的内部项目。我花了几个小时试图让 NavDropdown 组件工作。我已经尝试将示例代码从https://reactstrap.github.io/components/dropdowns/移植到我的项目中，以对其进行测试并构建我自己的导航，并从这个示例https://codepen.io/eddywashere/中获取线索笔/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"
  }
}
4

1 回答 1

0

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

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

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

也许要检查什么？

于 2017-08-25T20:15:14.613 回答