今天随便翻了一下antd的组件库,看到下面这样的组件,当时我就震惊了: 这尼玛,这是出于什么样的考虑,一个列表还要用户编写子项的渲染方式. 所以,我就自己写了一个 List.js: List.less: index.js: 效果: 当然,可以根据需要添加更多的事件以及对其他数据格式的支持. 自个儿写了个Input输入框组件: X_UI.js: import React, { Component } from 'react'; import './X_UI.less'; /*输入框*/ expor…

Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html…

react当中的props-type用来检测传入组件当中的数据是否符合组件的要求,但是之前的只是能做些简单常规的判断,如果需要做复杂的判断,就需要使用到自定义函数来做类型检测了. 下面是官网的例子 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( 'Invalid prop `' + propName + '` suppl…

 背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近两年出现了React-lite.js,Vue.js,ReactNative,Weex...等一些开发方式,早期移动web端大多数基于sea.js模块化去开发,而我更倾向于组件化方式去开发,因为组件化的独立性才是为后期业务扩展,降低代码维护成本的最佳方案. 针对移动web端组件化,本人这次引用了古映杰…

Modal组件 长话不多说,接下来让我们来动手实现一个react Modal组件. 我们先来看一下实际效果 Modal的布局 首先,让我们先思考下一个Modal组件的布局是怎么样的. 我们先拿一个基本的Modal样例来分析下. 如上图所示,一个Modal组件可以分为mask.header.body和footer四部分,mask就不用说了,header主要是显示title和关闭按钮,body则是使用者自己传的内容,footer主要是按钮控件. Modal组件的参数(props) 我们确定了Moda…

React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导入组件 1.2 导入API 1.3 导入自定义组件 2.组件的声明 组件的生命分为组件的定义和样式.组件的定义有各种组件的组成结构.方法的定义. 2.1 组件的定义 2.2 组件样式 组件样式的定义可以直接在组件的定义中的style中定义.但是对于样式复杂的组件需要组件样式. 3.组件的注册或导出…

纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab是被选中的,哪个该被隐藏: getChildren() { let index = 0; let count = 0; const children = this.props.children; const state = this.state; const tabIds = this.tabIds…

react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v16.1.0 支持async await git地址 demo 安装 npm i react-uplod-img --save 引入 import UpImage from 'react-uplod-img' 调用 const getOSSSign = (suffix,width,height, e…

由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只是一点点而已. 由于之前发了一次,说字数太少从主页移出了,作为一个铁头娃,那我肯定得重写啊.前一次发的不够细致,这次就薛微细一点好吧, 由于,由于,鱿鱼,说的我都饿了.不说了进入正题好吧, 首先说说主体思想,思想比较简单,去拿过来百度地图的API和bee-mobile,然后将两者结合到一起,形成新的…

反正我自己是混淆了,React父子组件和组件类的继承弄混在一起了.这两个东西完全是不相关的. 父子组件可以看成两个组件标签的包含关系,在另外一个组件标签的内部就是子组件,父子组件通过这种关系通信. 组件类的继承,组件类也是类,是ES6的clsss继承关系,React组件共有的超类是React.Component,通过继承来构造一个新类.…