Question

我不知道我的项目有什么，但是使用 npm-保存我安装了reactstrap 来安装依赖项，并且下拉菜单仍然无法正确显示。

然后您可以看到它的外观，但我不明白为什么：

我尝试过使用kendo-react之类的库，但该库未显示下拉列表。这就是为什么我要尝试reactstrap的原因，但似乎我不会使用该库。

我的组件源代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import format from 'date-fns/format';
import gql from 'graphql-tag';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { graphql } from 'react-apollo';
import { Dropdown } from 'rsuite';

import {
  Button,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Progress,
} from 'reactstrap';

import './style.scss';

export class DayScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      currentIndex: 0,
      dropdownOpen: false,
      sortItem1: 'Select month',
      sortItem2: 'Select day'
     };
  }

  selectIndex = direction => {
    const { currentIndex } = this.state;
    const {
      data: {
        posts: { count },
      },
    } = this.props;

    let nexIndex = currentIndex + direction;
    nexIndex = nexIndex < 0 ? count - 1 : nexIndex;
    nexIndex = nexIndex >= count ? 0 : nexIndex;
    this.setState({ currentIndex: nexIndex });
  };
  toggle() {
    this.setState({ dropdownOpen: !this.state.dropdownOpen });
  }

  render() {
    const instance = (
      <Dropdown title="Default">
       <Dropdown.Item>New File</Dropdown.Item>
       <Dropdown.Item>New File with Current Profile</Dropdown.Item>
       <Dropdown.Item>Download As...</Dropdown.Item>
       <Dropdown.Item>Export PDF</Dropdown.Item>
       <Dropdown.Item>Export HTML</Dropdown.Item>
       <Dropdown.Item>Settings</Dropdown.Item>
       <Dropdown.Item>About</Dropdown.Item>
     </Dropdown>
   );
    const { data } = this.props;
    if (data.loading) {
      return <div>Loading...</div>;
    }
    if (data.error) {
      return <div>{data.error.message}</div>;
    }

    if (data.posts.rows.length <= 0) {
      return <div>Nothing...</div>;
    }
    const {
      data: {
        posts: { rows },
      },
    } = this.props;
    const { currentIndex } = this.state;
    const item = rows[currentIndex];

    return (
      <div className="container">
        <div className="box">
          <span />
          <span />
          <div className="monthText">Diciembre</div>
          <div className="dayText">12</div>
        </div>
        <div>
          <div className="textContainer">
            <div className="titleDayNow">
              {'LOREM IPSUM LOREM IPSUM'}
            </div>
            <div className="listMonthDay">
              <span className="circle">1</span>
              <span>Month</span>
              <div id="Campaigns">
                <div className="message-list-container">
                  <div className="control-container">
                    <ButtonDropdown
                      isOpen={this.state.dropdownOpen}
                      toggle={() => {
                        this.toggle();
                      }}>
                      <DropdownToggle caret>{this.state.sortItem1}</DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem1: e.target.innerHTML });
                          }}>
                          Select month
                        </DropdownItem>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem1: e.target.innerHTML });
                          }}>
                          January
                        </DropdownItem>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem1: e.target.innerHTML });
                          }}>
                          February
                        </DropdownItem>
                      </DropdownMenu>
                    </ButtonDropdown>
                    <span className="circuloMesDia">2</span>
                    <span>Dia</span>

                    <ButtonDropdown
                      isOpen={this.state.dropdownOpen}
                      toggle={() => {
                        this.toggle();
                      }}>
                      <DropdownToggle caret>{this.state.sortItem2}</DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem2: e.target.innerHTML });
                          }}>
                          Select day
                        </DropdownItem>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem2: e.target.innerHTML });
                          }}>
                          27
                        </DropdownItem>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem2: e.target.innerHTML });
                          }}>
                          28
                        </DropdownItem>
                      </DropdownMenu>
                    </ButtonDropdown>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {rows.map((item, index) => (
          <div className="listContentArticles">
            <div className="contentArticle">
              <div className="titleArticle">{item.title}</div>
              <div className="descArticle">{item.introtext}</div>
              <div className="writer">

                <div className="nameAuthor">
                  <div>{item.author'}</div>
                  <div>
                    <FontAwesomeIcon icon="eye" />
                    <span className="viewsArticles">9.000</span>
                    <FontAwesomeIcon icon="pencil-alt" />
                    <span className="countArticlesWrite">
                      {item.date_now_}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
        <p dangerouslySetInnerHTML={{ __html: item.introtext }} />
      </div>
    );
  }
}

DayScreen.propTypes = {
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    error: PropTypes.shape({ message: PropTypes.string }),
  }).isRequired,
};

DayScreen.defaultProps = {};

const queryOptions = {
  options: () => ({
    vars: {
      day: format(Date(), 'D'),
      month: format(Date(), 'M'),
    },
  }),
};

export default graphql(query, queryOptions)(DayScreen);

样式正确，因为我在这里尝试过并且可以正常使用，但是在我的项目中不起作用。

https://stackblitz.com/edit/reactstrap?file=index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Example from './Example';
import { Container } from 'reactstrap';

import {
  Button,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Progress,
} from 'reactstrap';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
       currentIndex: 0,
      dropdownOpen: false,
      sortItem1: 'Elije un mes',
      sortItem2: 'Elije un día'
    };
  }

  render() {
    return (

                    <ButtonDropdown
                      isOpen={this.state.dropdownOpen}
                      toggle={() => {
                        this.toggle();
                      }}>
                      <DropdownToggle caret>{this.state.sortItem2}</DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem2: e.target.innerHTML });
                          }}>
                          Elije un día
                        </DropdownItem>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem2: e.target.innerHTML });
                          }}>
                          27
                        </DropdownItem>
                        <DropdownItem
                          onClick={e => {
                            this.setState({ sortItem2: e.target.innerHTML });
                          }}>
                          28
                        </DropdownItem>
                      </DropdownMenu>
                    </ButtonDropdown>
    );
  }
}

export default App;
render(<App />, document.getElementById('root'));

在我的代码中，我没有在DOM中呈现，这与它有关系吗？。

谢谢！

Answer 1

由于reactstrap取决于引导程序，因此您需要安装软件包bootstrap和reactstrap

npm i --save bootstrap reactstrap

要使用simpy软件包的样式，请将其添加到您的index.js文件中

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

包含样式的另一种方法是将CDN加载到index.html中：

<link ref="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js" />

我的下拉样式未使用reactstrap导入

1 个答案: