Question

我刚开始在我的网站上实现React-Bootstrap，但点击它时NavDropdown组件不会展开。

我做了什么： npm install -s react-bootstrap

将css添加到html：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

创建了我的Navigation组件：

import React from 'react';
import PropTypes from 'prop-types';
import NavbarHeader from 'react-bootstrap/lib/NavbarHeader';
import NavItem from 'react-bootstrap/lib/NavItem';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavbarCollapse from 'react-bootstrap/lib/NavbarCollapse';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';
import NavbarToggle from 'react-bootstrap/lib/NavbarToggle';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

export class Header extends React.PureComponent {
  render() {
   return (
    <Navbar inverse collapseOnSelect>
    <NavbarHeader>
      <NavbarBrand>
        <a href="#">React-Bootstrap</a>
      </NavbarBrand>
      <NavbarToggle />
    </NavbarHeader>
    <NavbarCollapse>
      <Nav>
        <NavItem eventKey={1} href="#">Link</NavItem>
        <NavItem eventKey={2} href="#">Link</NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link Right</NavItem>
        <NavItem eventKey={2} href="#">Link Right</NavItem>
      </Nav>
        </NavbarCollapse>
      </Navbar>
    );
  }
}

export default Header;

下拉列表不会展开：Gyazo Screenshare - Dropdown not expanding 检查elements：Gyazo Screenshare - rerendering in dom

时正在注册点击

有关此错误发生方式和原因的任何想法？

编辑：我目前正在使用React 16

编辑2：这是Github回购 https://github.com/Hespen/PWA-bootstrap npm install && npm run development - ＆gt; localhost:1337

Answer 1

请务必安装react-dom $ npm install --save react react-dom并导入＆＃34;渲染＆＃34;，这应该让它正常工作。根据{{3}}

，这是一项要求

我目前在我的一个项目中使用React-Bootstram，这些是对我有用的导入：

import React, { Component } from 'react';
import ReactDOM, {render} from 'react-dom';
import PropTypes from 'prop-types';
import { Nav, Navbar, NavItem, MenuItem, NavDropdown, Modal, Jumbotron } from 'react-bootstrap';

我希望这会有所帮助。

Answer 2

您的代码正在使用带有这些依赖项版本的create-react-app，可能会尝试更新：

"dependencies": {
    "react": "^16.1.1",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.1.1"
  }

使用与cdn链接相同的css。

顺便说一下，避免导出组件两次（仅对单个组件文件使用导出默认值）

编辑：你正在使用相同的事件键2个菜单项道具可能会尝试改变它。

Answer 3

对我来说，它是带有react-bootstrap的Bootstrap 4。当您降级到Bootstrap 3.3.7时，它会起作用。

Answer 4

在组件树上方的门户网站使用上下文时，我已经看到了这样的问题：

<MyContext.Provider value={props}>
  {children}
  {ReactDOM.createPortal(
    <MyComponent />,
    document.body,
  )}
</MyContext.Provider>

我通过为门户网站创建一个容器来修复它：

<MyContext.Provider value={props}>
  {children}
  {ReactDOM.createPortal(
    <MyComponent />,
    document.getElementById('portal'),
  )}
</MyContext.Provider>

React-Bootstrap下拉列表未扩展

4 个答案: