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

Answer 2

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

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

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

Reactjs - can't get dropdown menu to format correctly

reactstrap