React引入Antd组件

更新日期: 2019-05-28阅读: 4.2k标签: antd

Ant组件的安装和使用在官网都有教程,下面记录一下自己的使用。Ant组件是好用,一引入直接就有了功能组件。但问题是UI给我们的和这些组件往往不一样,比如样式颜色,多个view,button什么的,那么怎么定制ant组件的样式去实现我们的需求呢?


1.查阅ant组件的api文档,里面通常会有描述组件的属性功能。比如Menu组件,它可以很方便的实现二级菜单的功能,但是怎么定制二级菜单每个item的样式呢,Menu组件有个data的label属性,可以接收string和reactNode类型的参数,如果是string的话就直接显示到原生的view上;如果是ReactNode类型,就会显示自定义的样式,那么ReactNode又是什么呢?ReactNode其实就是那些自定义的view,比如

 (
      <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
        <text>test</text>
      </div>
    );

把label设置为这个自定义的view之后,二级菜单的每个item就会显示成自己的view。


2.在浏览器的调试台,在elements里面找到ant组件,找到className,找到对应的属性,然后在less或css里面去修改样式。

或者给ant组件设置一个className,在css里面设置样式也可以。再或者使用React.CSSProperties,在react里面设置内联样式,举个例子:

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
          Content of first tab
 </div>

上面那个style=后面的就是React.CSSProperties。

 

链接: https://www.fly63.com/article/detial/3435

在webpack自定义配置antd的按需加载和修改主题色

最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less,根目录添加config-overrides.js,修改npm script即可, 一切正常

create-react-app同时对多个框架(antd+antd-mobile)做按需加载的方法

在React项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,首先介绍下对单个框架做按需加载的方法

Antd中List组件的复用

最近在使用List组件的时候,发现组件没有重新渲染,导致状态发送错误。这里我们使用了List组件,这是一个很常用的组件。但是当我们点击按钮的时候,发现6,7,8三个组件 都没有重新渲染。

antd中select下拉框值为对象选中的问题

使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在option中的value值也是可能重复的

基于antd封装一个高可用form组件,减少cv代码导致的bug

在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比较多,所以可以加以封装

antd—Select组件下拉选项的样式问题(模态框类似)

modal框的dom与<div id=root>同级别,因此不能以user-manage为父元素定义样式,以.modal定义样式会污染其他模块的模态框,(下拉框选项的级别也与root同级),即:

手把手教你实现一个常用的 antd form 组件

我们从官网摘下来一段Form代码,可以很清晰的看出一个简单的表单,主要是为了统一收集和校验组件的值。那么它是如何做到统一收集和校验呢?原理很简单,只需要通过监听表单组件的onChange事件,获取表单项的 value

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!