![](https://img-blog.csdnimg.cn/20191106141459875.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
马优晨
生活中的打击和挫折远比想象的更多,有时灾难又会让你的一切努力白费,也许明天我们就会死去,但如果我们还活着,在面对着种种不公和无奈过后,“明天的明天的明天,你是否会依然爱着这个世界。” 我想我会.......................
展开
-
报错:Failed to set an indexed property on ‘CSSStyleDeclaration‘: Index property setter is not sup
CSSStyleDeclaration异常原创 2023-03-14 14:56:56 · 1206 阅读 · 0 评论 -
PC菜单筛选器
如上图所示,不使用UI库,手写一个筛选器JS代码'use strict';import { createElement, useEffect, useState, Fragment, useCallback, useMemo, useRef,} from 'rax';import View from 'rax-view';import Text from 'rax-text';import Picture from '@ali/rax-pictu...原创 2022-04-14 15:09:43 · 355 阅读 · 0 评论 -
react组件之间重用状态
有时候我们会想要在组件之间重用一些状态逻辑。目前为止,有两种主流方案来解决这个问题:高阶组件和render props。但是这里我们讲一种自定义hook的方式: 首先,我们把公用逻辑抽取到一个叫做useFriendStatus的自定义 Hook 里: useFriendStatus组件import React, { useState, useEffect } from 'react';function useFriendStatus(friendID) {...原创 2021-11-03 15:14:10 · 320 阅读 · 0 评论 -
在网页中使用react
一、使用原生的方式引入 完整代码: like_button.js'use strict';const e = React.createElement;class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.like...原创 2021-11-03 14:55:27 · 516 阅读 · 0 评论 -
一个列表中按钮的不同样式
如上图所示,假设这是一个传统的秒杀购买场景:(1)问题概述:状态: (1,2)进入秒杀 (3)立即预约 (4)宝贝秒光 (5)活动结束 文字: 进入 秒杀文字颜色#fff,其他文字颜色都是 #ff3B56; 宝贝秒光,活动结束,文字带透明度30%;描边: 只有立即预约有描边,其他状态都没有按钮透明度:立即预约 8% 进入秒杀 100% 宝贝秒光 8% 活动结束 8%(2)解决方案: 拿到这个问题,首先很多人想想到的是...原创 2021-10-12 11:02:37 · 326 阅读 · 0 评论 -
react列表元素hover
常见的列表元素hover,我们使用的方式是,在获得原始数组对象的时候加一个标识符,然后mouseIn 的时候改变状态,mouseOut的时候恢复状态;一、举例演示const arr = [ {name:'123',age:13,sex:'man'}, {name:'125',age:13,sex:'man'}, {name:'124',age:13,sex:'man'} ](1)添加标识const arr = [ {name:'123',age:13,sex:'man',sho原创 2021-02-25 17:57:47 · 5152 阅读 · 0 评论 -
react 条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。(1)元素变量你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。if (isLoggedIn) { button = <LogoutButton onC原创 2020-12-07 10:28:47 · 195 阅读 · 0 评论 -
react hooks实例演示
(1)useState的使用设置count的值和name的值;上边的情况会发生,name的值设置不进去,这注意:如果是对象或者数组等类型,必须要返回一个新的数组或者是对象才是可以的;初始值是对象初始值是数组(2)useEffect的使用useEffect的第二个参数第二个参数不写,只要dom变化都会进行监听,都会触发。如果是【】,只会触发一次。也可以专门去监听某一个值,比如上面的count, count的值变化,effect 就会执行;如果要想要清除副作用,则可以在effec原创 2020-11-12 14:41:11 · 759 阅读 · 0 评论 -
react hook问题讲解
React Hook 官网地址:https://react.docschina.org/docs/hooks-faq.html(1)问题分析?Hook 是什么?Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。什么时候我会用 Hook?如果你在编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其它转化为 class。现在你可以在现有的函数原创 2020-11-11 15:35:14 · 712 阅读 · 0 评论 -
JSX属性扩散
假如一个组件有很多属性,当然可以如下这样做。const Profile;let name = 'viking', age = 10, gender = 'Male';let component = <Profile name={name} age={age) gender={gender} />;但是,当这样的属性特别多的时候,书写和格式看起来就会变得很复杂,所以JSX有一个...原创 2019-06-24 20:30:44 · 587 阅读 · 0 评论 -
react 常用规范和经验
(1)业务代码里面的异步请求需要 try catchajax 请求,使用 try catch,错误提示后端返回,并且做一些失败后的状态操作例如进入列表页,我们需要一个 loading 状态,然后去请求数据,可是失败之后,也需要把 loading 状态去掉,把 loading 隐藏的代码就写在 finally 里面。getStudentList = async () => { try ...原创 2019-05-23 18:07:56 · 334 阅读 · 0 评论 -
react中setState有三种用法
(1)对象this.setState({})(2)函数,一般是用于在setState之前做一些操作this.setState( () => { // TODO console.log('') return { a:300 } })(3)第二个参数,一般是用于在setState之后做一些操作this.setState({...原创 2019-05-23 09:53:01 · 3786 阅读 · 1 评论 -
Mac上安装create-react-app
Mac上安装create-react-app,经常出现安装不上,这里说一下办法:方法一:sudo npm install -g create-react-appcreate-react-app my-reactcd my_codeyarn start方法二:yarn global add create-react-appcreate-react-app my-appcd m...原创 2019-03-16 10:17:46 · 6110 阅读 · 0 评论 -
react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况:第一种手写的,不使用脚手架:1.安装:npm install ant --save2.引用:import { Alert, Form, Input, Button, Checkbox, Row, Col, message, Modal, Icon } from 'antd'; 3.安装组件npm...原创 2019-03-07 19:58:28 · 3693 阅读 · 0 评论 -
vue和react的区别
前段时间刚从携程离职,中间面试了几家公司,因为本人 用过 backbone,underscore,jquery,vue,react 所以总有人问我这几个语言之间的区别。在这里我只说一下,我对vue和react的理解。1- vue 和 react 都是一门前端开发语言。2- vue 和 react 都有自己的生态圈(全家桶)。vue 全家桶Vue有著名的全家桶系列:vue-router(h...原创 2018-10-15 20:33:00 · 13125 阅读 · 3 评论 -
create-react-app脚手架工具使用
1- 快速创建项目npm install -g create-react-app //---全局安装react脚手架create-react-app my-app //---通过react脚手架创建my-app项目cd my-app/ //---打开my-app项目npm start ...原创 2018-07-16 09:13:16 · 1394 阅读 · 0 评论 -
react16中ref的使用
在 React16 新版本中,新引入了 React.createRef 与 React.forwardRef 两个 API,有计划移除老的 string ref,使 ref 的使用更加便捷与明确。如果你的应用已经升级到 React16.3+ 版本,那就放心大胆使用 React.createRef 吧,如果暂时没有的话,建议使用 callback ref 来代替 string ref。strin...原创 2018-07-26 13:46:34 · 6611 阅读 · 2 评论 -
react获取URL中参数
这个问题想必很多人都会遇到过,这里我说一下怎么获取URL中的参数。 如图获取purchaseOrderNo中的值。这个时候我们需要使用一个东西: `queryString.parse(_this.props.location.search)`通过这句话就可以获得,我们在purchaseOrderNo传入的值。注意点: 如果这个值需要在页面中及时获得,这个时候就需要注原创 2017-12-12 21:26:42 · 63623 阅读 · 6 评论 -
前端为什么要使用组件化的思想,通过一个实例来分析
在平时项目中,为什么我们都会采用组件化的思想去编写代码?其实的原因很简单!!! 我们在写代码的时候,写完以后发现这个代码会出现在其他地方,想要复用,或者同事感兴趣,想使用这个代码。这个时候我们就需要通过组件化来实现代码的复用了,否则工作量真的是………..接下来通过一个例子大概分析一下: 这个是一个点赞的功能~ 如果给我写,那 简单 啊HTML...原创 2018-02-11 11:02:12 · 1740 阅读 · 0 评论 -
react组件嵌套
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.m原创 2018-04-24 18:17:26 · 974 阅读 · 0 评论 -
react设置默认props
一般设置props的默认值有两种方式,下面通过一个例子说明一下。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>React表单</title> <script src="https://c原创 2018-04-27 15:03:10 · 19327 阅读 · 0 评论 -
react复制内容到剪贴板
这里只讲一个react的实现方式,我们使用react-copy-to-clipboard首先安装 react-copy-to-clipboardnpm install –save react react-copy-to-clipboard或者cnpm install –save react react-copy-to-clipboard或者 yarn add re...原创 2018-05-25 10:24:30 · 13526 阅读 · 1 评论 -
antd中表格的字段设置成掩码
如上图所示,是一个利用antd制作的一个表格,现在讲微信里面的字段设置成掩码格式。代码:const columns = [ { title: '用户编号', dataIndex: 'originalId', key: 'originalId', width: 70, }, { ...原创 2018-06-05 10:53:49 · 1057 阅读 · 0 评论 -
vue项目和react项目中禁止eslint
vue项目禁止eslint:react项目禁止eslint:找到webpack.base.conf.js文件,然后注释掉里面 红色框圈住的内容即可。原创 2018-06-06 09:43:44 · 7668 阅读 · 0 评论 -
react日期格式化实例
以前写过一篇关于原生JS和vue项目中日期格式化的文章,现在写一下关于react项目中日期格式化的方式。使用react的 momentimport moment from &amp;quot;moment&amp;quot;;let statusPassTime = moment(parseInt(entity.statusPassTime)).format('YYYY-MM-DD');/*说明*/let 格式化后的...原创 2018-06-13 14:20:28 · 20782 阅读 · 0 评论 -
antdesign的表单中的下拉框设置默认值BUG处理
问题:使用 antdesign 下拉框的默认值是状态值,而不是状态值对应的文案?model层传递的数据view层在表单中设置的值解决方案:在默认值的后面加上一个空字符串进行转换...原创 2018-06-22 11:33:36 · 14722 阅读 · 2 评论 -
antdesign 表单中的单选按钮处理
如上图所示,是一个单选按钮,如果需要获取单选按钮的默认值,那样怎么处理呢?代码:class FilterForm extends ListFilterForm { constructor() { super(); this.state = { //先声明变量并初始化 isAll: true } } handleSubmit= ...原创 2018-06-22 14:05:08 · 10626 阅读 · 0 评论 -
react中弹框的显示隐藏
这里讲解一下react组件中常见弹框的显示隐藏~ 在这里主要涉及一个知识点,就是父子组件的通讯。如图所示:1- 点击编辑按钮的时候弹出对应的弹框。2- 在弹框中点击确定或者取消的时候弹框消失。代码如下所示:父组件:/*设置默认值*/ constructor() { super(); this.state = { visibl...原创 2018-06-08 18:27:44 · 18089 阅读 · 6 评论 -
react获取state的值并更新使用
react获取state的值并且修改分为两种情况:在视图层处理://在 state 中饭设置初始值state={ name:'', age:'' }//通过 控制一个事件触发然后setState 去设置setName=()=>{ this.setState({ name })}在model层处理:vie...原创 2018-06-25 14:47:59 · 23347 阅读 · 0 评论 -
react子组件向父组件传递数据实例
这个例子很简单,看一下就懂:class Son extends React.Component { render() { return &lt;input onChange={this.props.onChange}/&gt;; }}class Father extends React.Component { constructor() { super();...原创 2018-06-27 17:43:19 · 4337 阅读 · 0 评论 -
react使用setState注意事项
React设计setState方法就是为了重新渲染页面看看下面的代码实现的结果:state = { value : 0}function test() { this.setState({ value: this.state.value + 1 }); this.setState({ value: this.state.value + 1 }); thi...原创 2018-07-23 17:22:58 · 4174 阅读 · 0 评论 -
react控制元素的显示或隐藏
如图所有,当我选择公司性质为 “默认” 或者 “个人” 时候 ‘公司全称’字段是隐藏。当我们选择公司性质为“公司”时 ‘公司全称’字段展示。默认状态:公司性质为“公司”这个功能该如何实现呢?思路: 1.在‘公司性质’这个 select框上面绑定一个 onchange事件,每次变化 获取到当前select框 对应的值。2.将获取到当前select框的值写一个接口...原创 2018-07-19 13:46:47 · 58169 阅读 · 5 评论 -
ant design表格添加loading效果
这里看一下ant design中表格添加loading效果。在页面进来,获取数据时候获取到数据的时候实现方法: 这里只需要在要渲染的表格中添加,loading={XXXX} 即可。大括号里面的值如果是true,则显示loading效果,如果是false则不显示loading。原创 2017-12-13 16:28:47 · 23302 阅读 · 13 评论