尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框
尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框
近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-medules构建,
项目代码 https://github.com/sunrun93/react-custom-components
启动项目:
git clone git@github.com:sunrun93/react-blog-app.git
npm i
npm start
启动项目后,如若发现本地css未生效,请在node_modules\react-scripts\config\webpack.config.dev.js和node_modules\react-scripts\config\webpack.config.prod.js找到对应的css-loader, 在其options中添加如下两项(modules,localIdentName):
loader: require.resolve('css-loader'),
options: {
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
主要组件包括:
. Search-box:具有输入搜索功能的下拉列表,仅支持单项选中,并可根据用户输入匹配筛选选项,调用方式如下:
let options = [
{ id: '1', label: 'Option-A', value: 'Option-A' },
{ id: '2', label: 'Option-B', value: 'Option-B' },
{ id: '3', label: 'Option-C', value: 'Option-C' },
{ id: '4', label: 'Option-D', value: 'Option-D' }
];
<SearchBox options={options}/> //显示label
Toggle-btn:模仿ios系统中的开关按钮,基于checkbox实现一个toggle-btn的小插件。样式上,隐藏checkbox勾选框的样式,将troggle-btn的样式添加到checkbox的label上:
<input type="checkbox" checked={this.state.isCheck} className={this.state.isCheck?styles.greenDotRight:styles.greenDotLeft}/>
<label></label>
input[type='checkbox'] {
visibility:hidden;
position:absolute;
}
.greenDotLeft+label{
width:30px;
height: 30px;
border-radius: 15px;
background-color:lightgray;
display: inline-block;
position: absolute;
left: 0;
}
.greenDotRight+label{
width: 30px;
height: 30px;
border-radius: 15px;
background-color: lawngreen;
display: inline-block;
position: absolute;
right:0;
}
调用方式如下:
<ToggleBtn isChecked={isChecked} onClick={toggleEvent}/> //onClick触发想要调用的方法,接受一个参数拿到当前的状态,isChecked可定义初始化的值
dialog-component 弹出框/对话框组件 - 弹出框或者对话框组件在web应用中非常的常见,因此尝试使用react构造一个对话框组件。
首先我们考虑一下两点:
- 弹出框显示时,通常情况会生成一个遮罩层,使用户无法触发页面上的其他操作。
- 弹出框的DOM节点在根节点生成,显示或关闭不能影响原本的页面结构。
因此,我们考虑通过两部分来构造这个组件,并通过ReactDOM提供的ReactDOM.unstable_renderSubtreeIntoContainer
方法将其插入到DOM的根节点,结构如下(Layer层为遮罩层,Dialog为我们实际构造的组件):
<Layer>
<Dialog>
/* customer defined dialog content */
</Dialog>
</Layer>
Layer层的具体实现如下,具体请查看
class Layer extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.renderLayer();
}
componentDidUpdate() {
this.renderLayer();
}
componentWillUnmount() {
this.removeLayer();
}
renderLayer() {
if (!this.props.open) {
this.removeLayer()
} else {
if (!this.layer) {
this.layer = document.createElement("div");
this.layer.className = styles.layer;
document.body.appendChild(this.layer);//首先将Layer节点添加到DOM中
}
ReactDOM.unstable_renderSubtreeIntoContainer(this, this.props.children, this.layer);
//然后通过unstable_renderSubtreeIntoContainer方法将其放到根结点下
}
}
removeLayer() {
if (!this.layer) {
return;
}
ReactDOM.unmountComponentAtNode(this.layer);
document.body.removeChild(this.layer);
this.layer = null;
}
render() {
return null;
}
}
具体实现方式:https://github.com/sunrun93/react-custom-components
尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框的更多相关文章
- 使用react+redux实现弹出框案例
redux 实现弹出框案例 实现效果,点击显示按钮出现弹出框,点击关闭按钮隐藏弹出框 新建弹出框组件 src/components/Modal.js, 在index.js中引入app组件,在app中去 ...
- co-dialog弹出框组件-版本v2.0.0
co-dialog theme 访问git:co-dialog 版本v2.0.0 主题2 coog.app('.theme2').use({ title: 'JUST CHECKING.', mess ...
- ReactNative: 使用弹出框组件ActionSheetIOS组件
一.简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- 关于隐式创建vue实例实现简化弹出框组件显示步骤
我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...
- bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作
在bootstrap里面,有一个组件很可爱,它就是popover,它是对标签title属性的优化,奉上连接一枚:http://docs.demo.mschool.cn/components/popov ...
- 通用的popupwindow底部弹出框
前段时间做项目的时候,有几个底部弹出框,当时因为忙着赶进度所有就单独写了好几个popupwindow.后来就想着怎么实现一个通用的PopupWindow工具类 就是在要用到的时候创建该工具类的对象,并 ...
- [RN] React Native 封装选择弹出框(ios&android)
之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用. ...
随机推荐
- 《The Unreasonable Effectiveness of Recurrent Neural Networks》阅读笔记
李飞飞徒弟Karpathy的著名博文The Unreasonable Effectiveness of Recurrent Neural Networks阐述了RNN(LSTM)的各种magic之处, ...
- 09年OA系统集成商资料(转载)
[转载]哪个OA比较好,18家常见OA系统全方位大阅兵 原文地址:http://ec.zdnet.com.cn/managesoft/2009/1104/1503211.shtml 凡是比较或者评测的 ...
- Ruby module里的self
创建: 2018/03/15 更新: 2018/03/22 把标题ruby首字母大写 都知道def self.方法名 来定义类方法 class SampleClass def self.class_m ...
- iOS 消除Xcode警告
- undeclared selector #pragma clang diagnostic push #pragma clang diagnostic ignored"-Wundeclar ...
- Mybatis查询select操作
先看select标签的属性: 说几点: resultType和resultMap都是用来表示结果集的类型的,resultType用于简单的HashMap或者是简单的pojo对象,而resultSet是 ...
- 179 Largest Number 把数组排成最大的数
给定一个非负整数的列表,重新排列它们的顺序把他们组成一个最大的整数.例如,给定 [3, 30, 34, 5, 9],最大的组成数是 9534330.注意: 结果可能非常大,所以您需要返回一个字符串而不 ...
- commons-lang常用工具类StringEscapeUtils使用--转
https://my.oschina.net/ydsakyclguozi/blog/341496 在apache commons-lang(2.3以上版本)中为我们提供了一个方便做转义的工具类,主要是 ...
- 微服务熔断限流Hystrix之Dashboard
简介 Hystrix Dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard可以直观地看到各Hystrix Command的请求响应时间,请求成功率等数据 ...
- java之java.lang.UnsupportedClassVersionError:com/mysql/jdbc/Driver : Unsupported major.minor version 52.0
问题解释:jdk版本和mysql驱动版本不兼容,比如:jdk1.7与mysql-connector-java-5.xxx兼容,但与mysql-connector-java-6.xxx及以上不兼容
- swiper4初始化/swiper-init/data-swiper
用data属性初始化swiper <!DOCTYPE html> <html lang="en"> <head> <meta charse ...