class RadioGroup extends React.Component { getRadioComponent(item, index) { return <div className="custom-radio" key={this.props.name + '-' + index}> <input id={item.id} type="radio" name={this.props.name} value={item.value} c…

react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK. 使用 Typescript 编写,集成高德地图 SDK @type 声明文件(包括中文注释). ⚛️ 支持 React Hook 新增特性(需要 React 16.8+). 不依赖任何第三方组件. 安装 不依赖 uiw 组件…

如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary ,那么这个组件的字体颜色会变为 primary 对应的颜色,这是如何做到的?还有别人封装的组件类名都有自己独特的前缀,这是如何处理的呢,难道是 css 类名全部加上前缀吗,这也太麻烦了! 如果你正在困惑这些问题,你可以看看这篇文章. 我会参照 antd的divider组件 来讲述如何基于React封装…

在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组件,实现简单的顶部加载进度条.效果如下 组件放到components文件夹下,新建progress文件夹 progress/index.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types';…

想用react实现一个递归树,但一些框架里面的有些不符合需求,于是自己写了个,功能比较简单,欢迎批评指正.. react实现这样一个组织架构递归树,下级部门的收起和展开,点击部门名称时请求接口获取下级部门以及员工等.效果如下: 首先封装左边的组织架构组件organize-tree import React, { Component } from 'react'; export default class OrganizeTree extends React.Component { render(…

首先看我的效果图 我在评论框中输入数据,会在页面进行显示 这个效果图我们进行拆分就是,一个评论组件,一个大的评论列表组件,一个小的评论组件 首先整个页面中有的是我们的评论组件和列表组件 我们输入评论点击的时候会将评论放入一个数组中,最后存到状态机里面.通过this.state.comments我们的评论列表中 取到输入的评论 在我们的评论组件中,我们需要取到textarea中的值,从state中取到数据,最后通过事件将输入值传给父组件. 在我们的评论列表中,会通过遍历每一个小的评论组件展示数据…

import React, { Component } from 'react' import PropTypes from 'prop-types' import _ from 'lodash' import classNames from 'classnames' import { CloseButton, } from '@dby-h5-clients/pc-1vn-components' import './index.less' class NormalTab extends Comp…

一.最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码. import axios from 'axios'; export const MethodType = { GET: 'GET', POST: 'POST', PUT: 'PUT', DELETE: 'DELETE', PATCH:'PATCH' }; /** * 模块说明:有api_token的请求 */ export const request = (api, method = Me…

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:最近在开发钉钉的微应用,考虑到性能和UI库的支持,遂采用了React来开发前端. 目前我的项目是基于ABP框架的ASP.NET MVC/WEB API作为后端,AngularJS作为前端.但是发现钉钉官方的UI(SaltUI)是基于React封装的,另外AmazeUI的Touch版本也是React封装,也考虑到React性能更优,同时移动端网页的前端业务逻辑不会太复杂,就打算使用React来开…

Date: 2015-11-28 12:18 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. 构造基本结构 首先,我们先创建一个按钮,一个输入框.我们准备点击按钮时,后面有一个<span>显示和隐藏.代码如下: <div id="container"></div> <script type="text/jsx"> var TestClickComponent =…

React React简介 是由Facebook公司推广的一套框架,已经应用instagram等产品 React就是为了提供应用程序性能而设计的一套框架 在angular中,对dom提供了一些指令,让dom具有一些功能,例如ng-repeat让dom具有动态循环渲染的功能,ng-show让dom元素具有动态显隐的功能等等 比如将页面比作一辆汽车, Angular的实现就是为汽车添加一些装饰,增加一些功能,让汽车看上去很高大尚,这样势必要加大油门 React的实现就是重新制造一辆汽车,是有四个轱辘…

生命周期 React中的组件被看成是一个有生命的个体,因此赋予了声明周期的概念,就是为了定义组件所处的状态 React中组件共分三大周期,11个阶段 创建期(少年,成长)组件创建时候进入的时期 getDefaultProps    getInitialState    componentWillDid    render  componentDidMount 存在期(中年,反反复复的工作)组件内部数据(属性或者状态)更新时候进入的时期 componentWillReceiverProps   s…

最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijkplayer),直播控件(自定义控件继承自TextureView与SurfaceView) 1.两种控件切换方式? 讲到切换方式,那应该是从一个布局切换到另一个布局,那如何进行布局,可以是两种布局:嵌套布局(直播控件包括播放控件),单独布局(先移除容器的控件后添加所需控件),采用第二种方式进行实现.…

大家都知道BizCharts是基于react封装的一套图表工具,而HighCharts是基于jQuery的.但是由于本人对BizCharts甚是不熟,所以在react项目开发中选择了HighCharts,在使用及对接数据的时候也是遇到了各种问题. 下面简单说下项目需求:首先是两个网络数据源,要求随时间的变化网络折线图不断更新,且当展示一定的数据点后开始折线图从右往左平移. 下面附上该组件所有代码. import React, { Component } from 'react' import P…

React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  11232 views   尊重版权,未经授权不得转载 本文来自:画虎烂的专栏(http://blog.csdn.net/it_talk/article/details/52638456) (一)原生UI组件之VideoView视频播放器开发 React Native并没有给我们提供VideoView…

一. react.js的基本使用方法 (1)快速使用,hello world <div id="app"></div> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/JSXTransformer.js"></script> <scri…

React React简介 是由Facebook公司推广的一套框架,已经应用instagram等产品 React就是为了提供应用程序性能而设计的一套框架 在angular中,对dom提供了一些指令,让dom具有一些功能,例如ng-repeat让dom具有动态循环渲染的功能,ng-show让dom元素具有动态显隐的功能等等 比如将页面比作一辆汽车, Angular的实现就是为汽车添加一些装饰,增加一些功能,让汽车看上去很高大尚,这样势必要加大油门 React的实现就是重新制造一辆汽车,是有四个轱辘…

react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库. 在create-react-app建的项目目录中安装react-bootstrap. npm install react-bootstrap --save 安装bootstrap. npm install bootstrap@3.3.7 --save 在index.js文件中增加css引用. import 'bootstrap/dist/css…

俗话说"万丈高楼平地起",从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念.在学习React的过程中经常会把Element.Class和Component这几个基础概念混淆.所以我们看看这些React的概念到底是干什么的,有什么作用. 1. 从ReactDOM.render说起 ReactDOM是React封装DOM的一个软件包,提供了DOM的一些特定方法.render方法就是将React element渲染到事先定义的容器中. //…

React Native终于展示的UI全是Native的UI.将Native的信息封装成React方便的调用. 那么Native是怎样封装成React调用的?Native和React是怎样交互的? ViewManager UI组件:将Native的UI暴露出来供JS调用. Native组件封装成JS组件供JS调用.这里的一个问题是怎么将Native中的属性用在JS中.以及属性能够有哪些类型的?能够先思考一下. 以下Native的代码自己定义了一个View并定义了一个变化的属性color. pub…

公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处的! 首先,博主由于在小公司做过,有一定的前端基础,但是学习React框架的时候还是遇到了一些阻力.因为前端框架的一些思想是和后端完全不同的,特别是React这个面向组件的动态语言框架,用起来非常灵活. 顺便说点闲话,一个优秀的前端待遇会比同级别后端还要高一些,   因为一名优秀的前端不仅要不停的学…

安装脚手架: npm i create-react-app -g 创建项目命令: create-react-app 项目名字 启动命令:yarn start 如果不用脚手架,需要创建一下页面: 再安装 :npm i  react react-dom  -S   npm i   jsx-loader  -D 安装预设第一步:npm i babel-preset-react -D 第二步把react放到预设里面,你就可以在你的环境里面书写任何的html代码: ReactDOM.render(虚拟DO…

双十一剁手节过去了,大家应该在很多网页中看到了数字翻牌的效果吧,比如倒计时. 数字增长等.相信很多人都已经自己独立实现过了,我也在网上看了一些demo,发现HTML结构大多比较复杂,用了4个并列的标签来放置前后两个“牌”.本文就来讲解下,如何进一步精简HTML,让结构简单,让JS方法封装得易使用.先来看看最终效果: 每个翻牌的HTML结构(精简至2个并列标签): <div class="flip down"> <div class="digital fron…

react 前端项目技术选型.开发工具.周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, redux-thunk, redux-saga, react-redux, dva, umi 扩展架构:styled-components, recompose, react-loadable UI 框架:ant-design, ant-design-mobile, material-ui, Seman…

webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还在一步步走来,学习了很多.那时候还不会配置,直接从网上下了别人配置好的可以跑的.之后特意花了一段时间好好研究了下webpack,后面可以直接动手做一些基本的配置.webpack很强大,还有许多要学习的地方. 最近学习了挺多知识,堆积着没有记录到博客.找机会慢慢写出,因工作需要,最近干了后端,毕竟是前…

导语 React是我接触的第二个框架,我最初开始接触的是vue,但是并没有深入的理解过vue,然后在工作过程中,我开始使用了React,现在已经觉得React会比vue更加实用,但是这只是个人观点,可能只是我更喜欢React的写法吧,会给我一种代码界面比较清晰的感觉,所以我开始逐步的去准备了解这个玩意 因为在这之前我只看过官方文档,所以我想按照React中JS存放的顺序,一个个去研究,可能会花费比较长的时间 Index.js 引入了React.js React.js 它只做了一件事情,整合了所有…

1.不直接操作dom 今天在和同学讨论的时候,发现了一些以前没注意的问题. 这段时间自己学习时一直都是用原生js写代码,但是以前在公司经常使用jq,也不知不觉间让我习惯了操作dom的倾向. 使用vue也好react也好,在做一些页面操作时,难免总会使用getElementXXX的api.今天同学说了一句“你这种方式和jq有什么区别?”让我意识到自己的解题思路还没完全转变过来. 既然我们使用react,就应该专注在数据层面上的操作,一般而言真的无需去直接操作dom.我当即对页面代码进行调整,将页面…

把拖动div功能用react封装成class,在页面直接引入该class即可使用. title为可拖动区域.panel为要实现拖动的容器. 优化了拖动框超出页面范围的情况,也优化了拖动太快时鼠标超出可拖动区域的情况,优化了拖动会卡顿的情况. 页面中添加引入方法: <Draggable panelId="要拖动容器的id" titleId="容器内标题的id" contentId="容器内除标题外的其他部分id" setPanelPositi…

取消请求 React 中当前正在发出请求的组件从页面上卸载了,理想情况下这个请求也应该取消掉,那么如何把请求的取消和页面的卸载关联在一起呢? 这里要考虑利用 useEffect 传入函数的返回值: useEffect(() => { return () => { // 页面卸载时执行 }; }, []); 复制代码 假设我们的请求是利用 fetch,那么还有一个需要运用的知识点:AbortController,简单看一下它的用法: const abortController = new Abo…

本文基本跟着官方文档把API都走一遍,但会有实例来解释应该怎么用,木有比我更详细的API文档咯. React.createClass 参数:CONFIG(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null/false(表示啥都不渲染): var Component = React.createClass({ render: function() { return th…