Question

我试图在我的react项目上创建一个下拉菜单，但是在以我想要的方式格式化它时遇到了一些麻烦。这是我要模仿的项目：

https://stackblitz.com/edit/reactstrap-v6-lgz4y2?file=Example.js

这是我当前的项目：

https://codesandbox.io/s/relaxed-ellis-lp9mb

代码：

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

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

    this.toggle = this.toggle.bind(this);
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen: false
    };
  }

  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }

  onMouseEnter() {
    this.setState({ dropdownOpen: true });
  }

  onMouseLeave() {
    this.setState({ dropdownOpen: false });
  }

  render() {
    return (
      <Dropdown
        className="d-inline-block"
        onMouseOver={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
        isOpen={this.state.dropdownOpen}
        toggle={this.toggle}
      >
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem header>Header</DropdownItem>
          <DropdownItem disabled>Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem divider />
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
     </Dropdown>
    );
  }
}

不确定我在做什么错，但是欢迎所有帮助！

Answer 1

那是因为reactstrap取决于bootstrap css。您尚未包括该CSS。您将必须安装bootstrap，然后添加此导入

import "bootstrap/dist/css/bootstrap.min.css";

这是您使用正确格式的示例-

https://codesandbox.io/s/nervous-shockley-hvp0l

Answer 2

您必须安装bootstrap（npm install bootstrap），然后将样式添加到index.js import 'bootstrap/dist/css/bootstrap.min.css';

https://codesandbox.io/s/focused-night-yxo2t?fontsize=14

React.js-无法获得下拉菜单以正确格式化

2 个答案: