最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:
(1)添加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less
(2)根目录添加config-overrides.js
(3)修改npm script即可, 一切正常
这里主要说的是自建的react项目中如何配置及其容易出现的坑
一、按需加载
(1)在.babelrc中添加plugins (这里也可以在babel-loader的options中添加)
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' } ]
注意该步很容易有报错:
.bezierEasingMixin();Inline JavaScript is not enabled. Is it set in your options?
此时检查package.json中看看less的版本是否是3.x, 如果时降为less@2.7.3
再重启项目,搞定。
二、修改主题色
找到webpack.config.js的less-loader, 在options中添加
{ loader: 'less-loader', options: { sourceMap: true, modifyVars: { 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px' }, javascriptEnabled: true // 此项不能忘 } }
此处有个坑,之前使用ExtractTextPlugin插件对css样式提取,但如配置主题色修改,不能再使用提取插件,另外,找到.babelrc中找到之前按需加载的配置修改:
['import', { libraryName: 'antd', style: true } ]
删除之前的 libraryDirectory: ‘es‘,
修改之前的 style: "css" 为 style: true
修改主题是基于less提供的modifyVars变量进行修改的,所以按需加载时使用true
在React项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,首先介绍下对单个框架做按需加载的方法
最近在使用List组件的时候,发现组件没有重新渲染,导致状态发送错误。这里我们使用了List组件,这是一个很常用的组件。但是当我们点击按钮的时候,发现6,7,8三个组件 都没有重新渲染。
Ant组件的安装和使用在官网都有教程,下面记录一下自己的使用。Ant组件是好用,一引入直接就有了功能组件。但问题是UI给我们的和这些组件往往不一样,比如样式颜色,多个view,button什么的
使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在option中的value值也是可能重复的
在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比较多,所以可以加以封装
modal框的dom与<div id=root>同级别,因此不能以user-manage为父元素定义样式,以.modal定义样式会污染其他模块的模态框,(下拉框选项的级别也与root同级),即:
我们从官网摘下来一段Form代码,可以很清晰的看出一个简单的表单,主要是为了统一收集和校验组件的值。那么它是如何做到统一收集和校验呢?原理很简单,只需要通过监听表单组件的onChange事件,获取表单项的 value
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!