antd 左右滑动_如何使用reactjs创建可滑动的侧边栏

我正在尝试使用reactjs创建可滑动的侧边栏。但由于某些原因,这不会发生。我写的代码如下所示;如何使用reactjs创建可滑动的侧边栏

Sidebar.js

import React, { Component } from 'react';

class Sidebar extends Component {

render() {

return (

);

}

}

export default Sidebar;

app.js

import React, { Component } from 'react';

import Sidebar from './Components/Sidebar/Sidebar'

class App extends Component {

constructor() {

super();

this.state = {

showResults: true

}

this.handleSlide = this.handleSlide.bind(this);

}

handleSlide() {

this.setState({ showResults: !this.state.showResults })

}

render() {

return (

{this.state.showResults ? : null}

{this.state.open ? 'Close' : 'Open'}

);

}

}

export default App;

此代码仅切换的状态,并通过我显示或隐藏边栏的div。但有没有可能创建一个滑动div与此。我不想使用互联网上提供的任何插件。那么有人可以帮我解决这个问题。

2017-09-05

ankur

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不思议迷宫c语言基础,不思议迷宫神龙收藏品一览

不思议迷宫神龙收藏品一览是9K9K小编柚子人为大家带来的,七龙珠召唤神龙作为游戏最为迷人的彩蛋之一,召唤神龙拿钻石作为众多玩家的首选目标,但神龙的收藏品你知道多少呢,下面不妨详细了解一下吧。神龙收藏品一览:无限…

shell181网格划分_复合材料SHELL181单元完全攻略

前言ANSYS程序中的SHELL181单元是用于复合材料层合板结构分析比较好的单元之一。原文在ANSYS程序的在线帮助中,这篇文章是它的译文,是我们从专业角度对原文的翻译。目的在于帮助那些英语水平不高,而且从事复合材料结构计算分析的技术人员能够…

c语言如何判断是否是子序列,leetcode392(判断子序列)--C语言实现

求&#xff1a;给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。你可以认为 s 和 t 中仅包含英文小写字母。字符串 t 可能会很长(长度 ~ 500,000)&#xff0c;而 s 是个短字符串(长度 <100)。字符串的一个子序列是原始字符串删除一些(也可以不删除)字符而不改变剩…

leetcode数组汇总_LeetCode刷题:前言

LeetCode刷题&#xff1a;前言前言作为一个对编程超级不通的小白&#xff0c;在2020年11月开始打算正式的刷LeetCode。&#xff08;PS&#xff1a;前面有刷过&#xff0c;但是都是随机&#xff0c;看心情乱刷的&#xff0c;刷完后也没有什么感觉&#xff0c;该不会的还是不会&a…

淮海工学院大一c语言期中试题,《C语言程序设计》期中考试试卷

《《C语言程序设计》期中考试试卷》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《《C语言程序设计》期中考试试卷(5页珍藏版)》请在人人文库网上搜索。1、淮 海 工 学 院10 11 学年 第 2 学期 C语言程序设计 期中考试试卷题号一二三四五总分得分单项选择题答题表123…

通信基站c语言,[转]2015年数学建模C题–基于无线通信基站的室内三维定位问题...

之前做的一题跟大家分享一下&#xff0c;实际该题数据出的有点问题(个人看法不喜勿喷)。这题主要是做基站定位的&#xff0c;方法主要是用的基于几何的方法。该题总共四题&#xff0c;由于只有测试case可以验证性能&#xff0c;非测试case的结果我就不放了在本题中&#xff0c;…

c语言fopen_s的用法,fopen和fopen_s用法的比较

参考&#xff1a;在定义FILE * fp 之后&#xff0c;fopen的用法是: fp fopen(filename,"w")。而对于fopen_s来说&#xff0c;还得定义另外一个变量errno_t err&#xff0c;然后err fopen_s(&fp,filename,"w")。返回值的话&#xff0c;对于fopen来说&…

php redis 投票_高可用Redis服务架构分析与搭建

HorstXuhttps://www.cnblogs.com/xuning/p/8464625.html基于内存的Redis应该是目前各种web开发业务中最为常用的key-value数据库了&#xff0c;我们经常在业务中用其存储用户登陆态&#xff08;Session存储&#xff09;&#xff0c;加速一些热数据的查询&#xff08;相比较mysq…

android studio 启动画面,Android Studio 利用Splash制作APP启动界面的方法

public class SplashActivity extends Activity {// private final int SPLASH_DISPLAY_LENGHT 2000; // 两秒后进入系统Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().addFlags(WindowManager.LayoutParams.…

android驱动测试,Android: 通过 cucumber 驱动 monkey 做稳定性测试

主要内容稳定性测试是什么Monkey 介绍自动化 Monkey稳定性测试是什么通过随机点击屏幕一段时间&#xff0c;看看 app 会不会奔溃&#xff0c;能不能维持正常运行。Monkey 介绍Monkey 是一个命令行工具&#xff0c;它可以运行在我们的模拟器或者设备当中。它可以发送一些伪随机(…

gradle 查看依赖类库版本_Android studio中查看依赖的第三方库的历史版本和最新版本...

在日常开发过程中&#xff0c;我们通过会依赖很多的第三方库项目。类似这样&#xff1a;dependencies {compile com.android.support:support-v4:24.2.1compile com.google.code.gson:gson:2.4compile com.lzy.net:okhttputils:1.7.0compile com.github.ybq:Android-SpinKit:1.…

set和map去重调用什么方法_【ES6】Set、Map

SetSet 是 ES6 提供给我们的构造函数&#xff0c;能够造出一种新的存储数据的结构特点&#xff1a;只有属性值没有属性名&#xff0c;成员值唯一用途&#xff1a;可以转成数组&#xff0c;其本身具备去重(自动去重)&#xff0c;交集&#xff0c;并集&#xff0c;差集的作用等参…

cygwin 编译 android vlc,Cygwin 编译 VLC 问题

Cygwin 编译 VLC遇到了这么多问题&#xff0c;不过还好最后编译过去了。问题1&#xff1a;gcc -mno-cygwin -Wsign-compare-Wall -mms-bitfields -pipe -o libaccess_output_dummy_plugin.dll-g-shared -u _vlc_entry__0_8_6 -L/usr/win32/liblibaccess_output_dummy_plugin.a …

kvm上添加万兆网卡_烂泥:为KVM虚拟机添加网卡

本文首发于烂泥行天下。前几篇文章介绍了有关KVM安装虚拟机以及如何给虚拟机添加硬盘&#xff0c;今天我们再来介绍下有关如何给KVM虚拟机添加网卡。给KVM虚拟机添加网卡&#xff0c;可以分为两种形式&#xff1a;图形界面的和virsh attach-interface命令的。图形界面的很简单&…

android studio日历小程序,android studio无法加载日历界面

LayoutInflater inflater (LayoutInflater) getApplicationContext().getSystemService(LAYOUT_INFLATER_SERVICE); //载入界面view inflater.inflate(R.layout.pumkin_calendar,null);AlertDialog.Builder ad;ad new AlertDialog.Builder(pumkinLand.this);ad.setView(view);…

gazebo 直接获取传感器数据_5个使传感器更简单的技巧

传感器遍布地球表面和周围空间&#xff0c;为世界提供数据。这些廉价的传感器是物联网背后的驱动力之一&#xff0c;也是我们社会现在面临的数字革命。然而&#xff0c;连接到传感器并从传感器获取数据并不总是直截了当或容易的。这里有五个提示&#xff0c;可以帮助工程师第一…

paylinks.php_毕业设计-基于PHP的网上购物网站系统设计

毕业设计-基于PHP的网上购物网站系统设计&#xff0c;共45页&#xff0c;14912字&#xff0c;附完整的程序源代码。包括前台&#xff0c;后台的实现&#xff0c;先运行phpStudyAdmin后打开dzsw/install.php摘要随着Internet技术的发展&#xff0c;人们的日常生活已经离不开网络…

com/android/dx/command/main,com/android/dx/command/dexer/Main : Unsupported major.minor version 52.0

如果你在开发过程中遇到了上述的Bug&#xff0c;基本上是JDK版本不一致造成的&#xff0c;指的是高版本的JDK编译的class不能放在低版本的JDK上运行。如果是Version 52&#xff0c;就表示JDK8编译的class不能运行在JDK7上&#xff0c;所以需要在本地安装JDK8. 如果是Version 51…

谷歌浏览器怎么重发请求_Googel 浏览器 模拟发送请求工具--Advanced REST Client

Advanced REST Client是 Chrome 浏览器下的一个插件&#xff0c;通过它可以发送 http、https、WebSocket 请求。在 Chrome 商店下搜索 Advanced REST Client&#xff0c;即可找到如果搜索不到的可到CSDN 下载&#xff1a;1.下载插件&#xff1a;Advanced Rest Client2.因为最新…

鸿蒙os吃内存吗,终于上手机!华为鸿蒙 OS 2.0 系统:128KB 内存就能跑

终于上手机&#xff01;华为鸿蒙 OS 2.0 系统&#xff1a;128KB 内存就能跑2020-09-11 10:51:480点赞0收藏0评论9月11日消息&#xff0c;华为昨天下午在东莞松山湖举办了全球开发者大会&#xff0c;本次大会带来了全新的 EMUI 11 系统和备受期待的鸿蒙 OS 2.0 操作系统&#xf…