Reactjs - 无法使下拉菜单正确格式化

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