Reactstrap NavDropdown组件不会打开

我还是新的反应，并且正在努力为工作中的内部项目使用react和reactstrap。我花了几个小时试图让NavDropdown组件工作。我试图将https://reactstrap.github.io/components/dropdowns/的示例代码移植到我的项目中，以便对其进行测试并构建自己的导航，从此示例中获取线索https://codepen.io/eddywashere/pen/KgjQay?editors=0010 Reactstrap NavDropdown组件不会打开

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

当我检查元素时，我可以在巡视器中看到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();

我用创建反应的-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" 
    } 
}

来源

2017-08-25 Owen

我看不出什么毛病，你在做什么，我通过文件去（没有说太多，只是一个例子），所有的例子至少有一个DropdownItem与“头” ATTR。尝试一下并评论你的发现 –

@ edgaromar90感谢你审查我的代码。我确实添加了一个标题attr到第一个DropdownItem - 但不幸的是没有运气。 – Owen

你能告诉我你是如何安装软件包的？您的代码正在为我工作。 –

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

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

我删除了我的node_modules /引导文件夹，并与NPM安装，并开始工作。

也许要检查一下吗？

来源

2017-08-25 20:15:14

如果你不知道答案，它应该是一个注释。 – Sagar

@DavidCarpus非常感谢这个建议。我做了我所有的依赖关系的重新安装。可惜仍然没有工作... – Owen

Reactstrap NavDropdown组件不会打开

回答

相关问题