经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 React

详细分析React 表单与事件

本章节我们将讨论如何在 React 中使用表单。 HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。 在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素...[2020/7/8]

实例讲解React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillM...[2020/7/8]

详解React 条件渲染

在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI...[2020/7/8]

详解React 元素渲染

详解React 元素渲染

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。 const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏...[2020/7/8]

实例讲解React 组件

实例讲解React 组件

本章节我们将讨论如何使用组件使得我们的应用更容易来管理。 接下来我们封装一个输出 "Hello World!" 的组件,组件名为 HelloMe age: function HelloMe age(props) { return <h1>Hello World!&...[2020/7/8]

使用Taro实现小程序商城的购物车功能模块的实例代码

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。 现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非...[2020/6/5]

taro 实现购物车逻辑的实例代码

taro 实现购物车逻辑 效果 taro是什么? Taro 是一套遵循 React 语法规范的 多端开发 解决方案。 现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的...[2020/6/5]

react结合bootstrap实现评论功能

react结合bootstrap实现评论功能

本文实例为大家分享了react结合bootstrap实现评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...[2020/5/30]

使用React代码动态生成栅格布局的方法

使用React代码动态生成栅格布局的方法

作为 TerminalMACS 的一个子进程模块 - React Web管理端,使用Ant Design Pro作为框架。 本文应用到的知识1.样式文件le 中方法的使用2.for循环创建按钮和栅格布局(flex布局) 1. 最终效果及源码链接 作为前端新手的我,做下面这个简单功能花了...[2020/5/25]

40行代码把Vue3的响应式集成进React做状态管理

40行代码把Vue3的响应式集成进React做状态管理

前言 vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中。 如果我们想把它集成到React中,可行吗?来试一试吧。 使用示例 话不多说,先看看怎么用的解解...[2020/5/20]

【React Native】安卓系统保存图片到系统相册(实例+错误解决)

  1、安装第三方库并引入 import CameraRoll from ''@react-native-community/cameraroll''; import RNFS from ''react-native-fs'';    Github参考链接:CameraRoll&n...[2020/5/11]

HTML5录音实践总结(Preact)

获取 PCM 数据 处理 PCM 数据 Float32 转 Int16 ArrayBuffer 转 Base64 PCM 文件播放 重采样 PCM 转 MP3 PCM 转 WAV 短时能量计算 Web Worker优化性能 音频存储(IndexedDB) ...[2020/5/7]

VSCode搭建React Native环境

安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行...[2020/5/7]

react组件基本用法示例小结

本文实例讲述了react组件基本用法。分享给大家供大家参考,具体如下: 组件间传值: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...[2020/4/27]

【React Native】正则判断字符串中是否包含url、提取字符串中的url

  1、字符串中是否包含某个指定的url checkInviteUrl(text) { var isLega = true if (text.indexOf("https: meteora.xyz/#/t/") !== -1) { ...[2020/4/23]

react 原生实现头像滚动播放的示例

本文介绍了react 原生实现头像滚动播放的示例,分享给大家,具体如下: 之前需要的是下面这个效果 现在。。。 憋说话,先看看效果。 感觉很简单呀,直接渲染,transform就可以了,嗯嗯,是的没错。 渲染出来,获取元素,然后添加c ,美中不足衔接不是很顺畅...[2020/4/21]

React Native 实现热更新并自动签名打包功能

项目背景:手动link的安卓App 1.下载 react-native-code-push npm install --save react-native-code-push 2.在android ettings.gradle文件下新增: include '':app'...[2020/4/17]

react axios 跨域访问一个或多个域名问题

1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http: iot-demo-web-dev.autel.com", 当然,这里是一个假地址 像这样: 这样跨域便完成了,当然...[2020/4/15]

php使用goto实现自动重启swoole、reactphp、workerman服务的代码

在平时使用swoole进行开发中,常常遇到这种问题,改了代码之后,手动ctrl+c中断服务,再敲命令重启服务。频繁地重启,感觉心很累。 php提供了inotify扩展,调用linux的inotify系统调用,监控文件的变化. 这时候就产生了一个想法,我开一个主进程监控文件变化,再开一个子进...[2020/4/13]

react国际化化插件react-i18n-auto使用详解

react-i18n-auto专门为中文国际化提供的自动化方案,快速迭代国际化开发,方法如下 安装 npm install react-i18n-auto --save-dev 第一步:添加babel插件配置(.babelrc添加方式) { "...[2020/3/31]

【React Native】集成声网Agora语音通讯

 前言:   公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库。  集成iOS、Android的步骤:   请参考链接:https: github.com yanb...[2020/2/24]

「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)

「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)

  运用在React 中 setState的对象、数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看,因此写个数组和对象的操作方法小笔记。   1、修改object中某项 ...[2020/2/12]

react-native-----hello word!

react-native运行helloword 今天是个特殊的时刻,我前天开始学习react-native,一直环境塔建出错,运行打包出错,今晚,我终于把这个难搞的环境给搭建好了,并成功运行了第一个helloword!! 这个环境:python2+java jdk+Android 我...[2020/1/19]

在 React 中使用 Typescript

在 React 中使用 Typescript

前言   用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松的实现重构。 顺便一提:全局安装的 create-react-app ...[2020/1/18]

react-React深入-一等公民-props-onChange

title: '[react]深入 - 一等公民 props & onChange' date: 2017-08-23 10:05:07 tags: react reactjs props onChange 框架 redux categories: ...[2020/1/17]

react-mockjs

2020-01-17 react-mockjs 使用 最近参加了公司的一个新的项目,前后端同时开发,这时后端提供不了前端接口,那么就要靠咱们前端自己mock数据啦。 用到mock 数据的工具是 mockjs ,就是这个。      这里是gith...[2020/1/17]

react-路由和Ant design

路由的使用 react-router import React from 'react' 如果要使用 路由模块,第一步,运行 yarn add react-router-dom 第二步,导入 路由模块 HashRouter 表示一个路由的跟容器,将来,...[2020/1/17]

深入理解redux之compose的具体应用

应用 最近给自己的react项目添加redux的时候,用到了redux中的compose函数,使用compose来增强store,下面是我在项目中的一个应用: import {createStore,applyMiddleware,compose} from ''redux''...[2020/1/13]

react quill中图片上传由默认转成base64改成上传到服务器的方法

使用react-quill富文本编辑器,里面处理图片是默认转成base64,提交到后台的时候文件太大,因此这里改写处理image的逻辑,改成上传到服务器。 具体代码如下: 配置1 import Quill from ''quill'' import ReactQuil...[2019/10/30]

React全家桶+Material-ui构建的后台管理系统

一、简介 一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心。 二、 附录+ 1. [在线体验](https: impleroom.github.i...[2019/10/30]

阿里雷卷:Reactive 基金会的成立将对开发方式带来哪些影响?

作者 | 赵钰莹 近日,Linux 基金会宣布成立 Reactive 基金会。对于 Reactive,各位开发者应该并不陌生,尤其是 Node.js 开发者,但真正了解并意识到这件事情对开发方式带来的影响的恐怕不多。本文,InfoQ 有幸第一时间对推动阿里巴巴成为该基金会初创成员的阿...[2019/9/17]

react项目添加本地音频

<audio src="./re audio/alarm.mp3" autoplay="autoplay" loop="loop" controls >   <track kind="captions" />   您的浏览器不支持 audio 元素。 <...[2019/8/15]

react如何在网页上编辑并运行代码?

最近想做个能在网站,能在网页上运行代码,并且保存这个组件,看了一下element-react的组件和官方的实例,发现都是可以编辑运行的,因为之前没有这方面的经验,所以看下各位大佬能不能给点意见 原文链接:http: www.cnblogs.com/brxchh/p/11204919.html[2019/7/18]

react koa rematch 如何打造一套服务端渲染架子

前言 本次讲述的内容主要是 react 与 koa 搭建的一套 r 框架,是在别人造的轮子上再添加了一些自己的想法和完善一下自己的功能。 本次用到的技术为: react | rematch | react-router | koa react服...[2019/6/27]

React组件对子组件children进行加强的方法

问题 如何对组件的children进行加强,如:添加属性、绑定事件,而不是使用<div>{this.props.children}</div>在<div>上进行处理。 前车之鉴 今天写组件遇到这个问题,在网上查阅了很多资料,都说可以使用Rea...[2019/6/24]

简谈创建React Component的几种方式

前言 当我们谈起React的时候,多半会将注意力集中在组件之上,思考如何将页面划分成一个个组件,以及如何编写可复用的组件。但对于接触React不久,还没有真正用它做一个完整项目的人来说,理解如何创建一个组件也并不那么简单。 在最开始的时候我以为创建组件只需要调用createCla 这个ap...[2019/6/17]

React 全自动数据表格组件——BodeGrid的实现思路

表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深入进行探讨以及介绍我的设计思路: 表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。我们逐一深...[2019/6/12]

【React Native】react-native之集成支付宝支付、微信支付

【React Native】react-native之集成支付宝支付、微信支付

一、在使用支付宝支付、微信支付之前导入桥接好的头文件   github地址:https: github.com/xujianfu/react-native-pay 二、集成支付宝支付流程   RN支付宝需要分别对iOS(Xcode)和安卓(AS)配置,与原生app相比只是将支付操作放在了R...[2019/6/12]

【React Native】React Native项目设计与知识点分享

  闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考。   GitHub:https: github.com/xujianfu/React-Native-CarProject.git   项目截图如下:    一、项目界面设...[2019/6/6]

React中使用外部样式的3种方式(小结)

一、关于c -in-js的认识 1、c -in-js是一种使用 js 编写 c 样式的 c 处理方案。它的实现方案有很多,比如styled-components、polished、glamorous(paypal 开源的,不再维护)、radium、emotion等等。 2、其中最成熟的...[2019/5/28]

JS中使用react-tooltip插件实现鼠标悬浮显示框

前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https: www.npmjs.com/package/react-tooltip 1, 首先在配置文件加上...[2019/5/16]

你再也不用使用Redux、Mobx、Flux 等状态管理了

Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能。看完这个库的说明后,没有想到代码可以这个玩。短短几行代码,仅仅使用 React Hooks ,就实现了状态管理的功能。 看完之后,第一想法就是翻译...[2019/5/9]

使用React手写一个对话框或模态框的方法示例

打算用React写对话框已经很长一段时间,现在是时候兑现承诺了。实际上,写起来相当简单。 核心在于使用React的接口React.createPortal(element, domContainer)。该接口将element渲染后的DOM节点嵌入domContainer(通常是document...[2019/4/25]

react this的作用域问题,麻烦大佬们帮我解决一下

element里面有个Table组件,我想在编辑和删除那里加上点击事件,但是发现点击方法没有效果 这里面的this看起来好像只针对这个作用域里面的,这里没有办法设置状态,也不能调用方法 设置状态会出现以下的错误,是那个return里面不能写吗?求大佬教我一下 &...[2019/4/24]

React 中无用但可以装逼的知识

最近看了Dan Abramov的一些博客,学到了一些React的一些有趣的知识。决定结合自己的理解总结下。这些内容可能对你实际开发并没有什么帮助,不过这可以让你了解到更多React底层实现的内容以及为什么要怎样实现。可以让你跟别人有更多的谈资,当然,也可以在某些场合装一下逼。那么接下来直接进入正文...[2019/4/16]

PowerBuilder编程新思维5:包装(界面美化与WebUI+React)

PowerBuilder编程新思维5:包装(界面美化与WebUI+React)

PowerBuilder编程新思维5:包装(界面美化与WebUI+React) 前一节,分析了三种界面美化方案,都是控件级的美化。今天再来分析一下窗口级的美化。上一次讲的DirectUI,大家反响一般,效果和创新都不足。那是没有讲完的原故。今天……还是没有讲完,不过效果应该还行吧:)。 &nbs...[2019/4/15]

面试题:react和vue的区别分析

面试题:react和vue的区别分析

react和vue是什么?有啥区别吗? 三大框架之二,大家应该都不会陌生,都有学习过或者开发中使用。 但是他们到底有啥区别呢?这个就是我们这篇文章所需探讨并学习的。 开始! MVC 和 MVVM 首先,来说明下这些字母代表的含义 M:Model 模型 V:Vie...[2019/4/8]

详解在React项目中安装并使用Less(用法总结)

le 的安装配置 安装react-app-rewired,react-app-rewire-le ,babel-plugin-import插件 执行命令: npm install react-app-rewired --save-dev npm install react-a...[2019/3/19]

详解React项目中碰到的IE问题

详解React项目中碰到的IE问题

最近接手一个React项目,在IE下碰到了俩问题 IE11报错如下: 跟踪一下之后,发现是一些其他的npm包里面用到了startsWith这个方法,可以自己polyfill一下: if (!String.prototype.startsWith) { String...[2019/3/15]

详解使用React制作一个模态框

模态框是一个常见的组件,下面让我们使用 React 实现一个现代化的模态框吧。 组件设计 模态框想必大家都很熟悉,是工作中常用的组件,可以让我们填写或展示一些信息而不必打开一个新页面。在开始编码之前,我们先来了解一个 React 模态框组件应该如何设计。 React 是一个状态(数据)驱动的...[2019/3/14]

295
2
记录数:64 页数:1/212下一页尾页
加载更多
 友情链接: NPS  问卷模板