我的下拉样式不与reactstrap进口
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的下拉样式不与reactstrap进口相关的知识,希望对你有一定的参考价值。
我不明白我的项目有,但NPM安装依赖--save我安装reactstrap,并且下拉仍然不能正确显示。
然后,你可以看到它的样子,我不明白为什么:
我曾与库试图像剑道反应的,并与该库中的下拉列表不显示。这就是为什么我试图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渲染,它有什么关系呢?
谢谢!
答案
由于reactstrap取决于引导你需要安装的软件包引导和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进口的主要内容,如果未能解决你的问题,请参考以下文章