React高阶组件中使用ref
react中forwardRef是用来解决HOC组件使用ref的问题的，所谓HOC就是Higher Order Component，比如使用redux的时候，我们用connect来给组件绑定需要的state，这其中其实就是给我们的组件在外部包了一层组件，然后通过…props的方式把外部的props传入到实际组件。forwardRef的使用方法如下： const TargetCompon…
Antd3中动态校验规则踩坑
场景描述 下图所示表单有三个字段，“跳转文案”和“跳转链接”只要填写了其中一个这两个字段就要变成必填，反之，两个都为空的时候两个字段都变成非必填；简单描述就是要吗都填写，要吗都不填写。 如下图所示，校验规则是要基于两个字段的值动态的生成的；也就包含了自己修改了也要动态的修改自己是否为必填； 解决方案 尝试过使用下面的方案 在state存储上面的两个字段的值，然后计算是否必填然后赋值给表单的校验规则…
从Popconfirm的实现学习React cloneElement用法
一直在使用antd（Ant Design），因为其丰富的组件库给管理后台开发带来了很多的便利性，让我们只需要关注业务。里面也有很多实现方案值得借鉴，本文就以Popconfirm的实现做个介绍。 我们先看是如何使用的，下面是官方给出的例子： import { Popconfirm, message } from 'antd'; function confirm(e) { consol…
RN开发常见问题
1、Text文本超出使用省略号 numberOfLines为1，1行超出就省略了，设置2，就是超出2行就会省略； <Text style={styles.raceTitle} numberOfLines={1}> {data.match_name} </Text> 2、Text同一行文本显示不同的样式 使用嵌套的文本会继承样式；例如一行有一部分是高亮；单个文本标签就会换行例…
升级react-scripts支持less
在react-scripts中默认是不支持less的，但是由于less的很多优点，我们在项目中做一些修改。 升级版本 原版本： "react-scripts": "0.9.x", 升级后版本： "react-scripts": "^4.0.1", 支持less文件编译 要支持less，就需要安装less和less-lo…
Antd3中的受控表单组件封装实例
展示效果 要求：左边是可以可以搜索的select，搜索结果点击搜索按钮执行搜索操作； 代码实现 import React, { memo, useState } from 'react' import { Button, Input, Select } from 'antd' import _ from 'lodash' import { apiSe…
React-Router4升级之路
最近将React升级到了16.2，也将项目的React-Router升级了v4，我主要说一下我的升级之路。 React 16 新特性 1、render支持了多种的返回类型，例如数组和代码片段等； 2、更好的错误处理，新增componentDidCatch钩子 ； 3、支持自定义DOM属性，属性会透传； 4、体积更小（比15减少了32%），删除了内置的类型检查React.PropTypes； 5、P…