Reactjs 我的下拉样式不是随reactstrap一起导入的
我不知道我的项目有什么，但是使用npm安装依赖项--save I install reactstrap，下拉列表仍然没有正确显示 然后你可以看到它是什么样子，我不明白为什么： 我已经尝试过像剑道反应这样的库，但没有显示该库的下拉列表。这就是为什么我要尝试去图书馆，但似乎我不会去图书馆 我的组件源代码：Reactjs 我的下拉样式不是随reactstrap一起导入的,reactjs,react-native,Reactjs,React Native,我不知道我的项目有什么，但是使用npm安装依赖项--save I install reactstrap，下拉列表仍然没有正确显示 然后你可以看到它是什么样子，我不明白为什么： 我已经尝试过像剑道反应这样的库，但没有显示该库的下拉列表。这就是为什么我要尝试去图书馆，但似乎我不会去图书馆 我的组件源代码： import React, { Component } from 'react'; import PropTypes from 'prop-types'; import format from
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);
import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“日期fns/格式”导入格式；
从“graphql标签”导入gql；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从'react apollo'导入{graphql}；
从'rsuite'导入{Dropdown}；
进口{
按钮
扣子放下，
下拉开关，
下拉菜单，
下拉项，
进步，
}来自“反应带”；
导入“/style.scss”；
导出类DayScreen扩展组件{
建造师（道具）{
超级（道具）；
this.state={
当前索引：0，
dropdownOpen:false，
sortItem1:'选择月份'，
sortItem2:“选择日期”
};
}
选择索引=方向=>{
const{currentIndex}=this.state；
常数{
数据：{
职位：{count}，
},
}=这是道具；
设nexIndex=currentIndex+方向；
nexIndex=nexIndex<0？计数-1:nexIndex；
nexIndex=nexIndex>=计数？0:nexIndex；
this.setState（{currentIndex:nexIndex}）；
};
切换（）{
this.setState（{dropdownOpen:！this.state.dropdownOpen}）；
}
render（）{
常量实例=(
新文件
具有当前配置文件的新文件
下载为。。。
导出PDF
导出HTML
设置
关于
);
const{data}=this.props；
if（数据加载）{
返回装载。。。；
}
if（data.error）{
返回{data.error.message}；
}
if（data.posts.rows.length
{this.state.sortItem1}
{
this.setState（{sortItem1:e.target.innerHTML}）；
}}>
选择月份
{
this.setState（{sortItem1:e.target.innerHTML}）；
}}>
一月
{
this.setState（{sortItem1:e.target.innerHTML}）；
}}>
二月
2.
迪亚
{
this.toggle（）；
}}>
{this.state.sortItem2}
{
this.setState（{sortItem2:e.target.innerHTML}）；
}}>
选择日期
{
this.setState（{sortItem2:e.target.innerHTML}）；
}}>
27
{
this.setState（{sortItem2:e.target.innerHTML}）；
}}>
28
{rows.map（（项目，索引）=>(
{item.title}
{item.introtext}
{item.author'}
9
{item.date\u now\u}
))}
);
}
}
DayScreen.propTypes={
数据：PropTypes.shape({
加载：需要PropTypes.bool.isRequired，
错误：PropTypes.shape（{message:PropTypes.string}），
}).要求，
};
DayScreen.defaultProps={}；
常数查询选项={
选项：（）=>({
变量：{
日期：格式（日期（），'D'），
月份：格式（日期（），'M'），
},
}),
};
导出默认图形QL（查询、查询选项）（DayScreen）；
import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Example”导入示例；
从“reactstrap”导入{Container}；
进口{
按钮
扣子放下，
下拉开关，
下拉菜单，
下拉项，
进步，
}来自“反应带”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
当前索引：0，
dropdownOpen:false，
sortItem1:“Elije un mes”，
sortItem2:“Elije un día”
};
}
render（）{
返回(
{
this.toggle（）；
}}>
{this.state.sortItem2}
{
this.setState（{sortItem2:e.target.innerHTML}）；
}}>
伊莱杰·恩迪亚
{
this.setState（{sortItem2:e.target.innerHTML}）；
}}>
27
{
this.setState（{sortItem2:e.target.innerHTML}）；
}}>
28
);
}
}
导出默认应用程序
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'));
npm i --save bootstrap reactstrap
import 'bootstrap/dist/css/bootstrap.min.css';
<link ref="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js" />