从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

当我在项目里使用 antd的Dropdown组件时出现的问题，我使用官网的例子，页面可以正常渲染，但当我鼠标放到Dropdown 上就页面崩溃，报了这个错。这个错的意思是Children.only只期望接收一个React元素子元素，从开发者工具看是 antd内部的错误。我的版本是 4.10.0，应该用下面这种写法！

DatePicker throws error "cannot be used as a JSX component" DatePicker抛出错误“不能用作JSX组件”

react antd Table里 使用filtes和scroll时页面报：Cannot read property 'appendChild' of null at getContainer

antd的upload组件，阻止默认上传事件（原上传默认会请求一个url，就算什么都不写也会请求）

​1.设置rowKey属性，也未设置columns属性的配置中第一列的key（react所需）Warning: Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary keyWarning:[antd:Table] Each record in dataSource of table should have a unique `key` pro

antd Table 实现 表格行固定

报错信息Sass Loader Error: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API schema。Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options obje

报错信息：Error:Need at least a key or a value or a label(only for OptGroup) for [object Object].报错意思：错误：至少需要[objec Object]的键、值或标签（仅适用于OptGroup）.解决方案：这个错误是因为用Option没有写value值，给Option加上value之就行了。...

react antd select 注意事项 及踩坑

使用场景和需求：当 表格出现滚动条时，想让其滚动到指定位置。实现步骤：给Table设置 一个 类名 或者 id 最好时id方式一、可以用 js的方式 获取元素<Table id="box" columns={columns} dataSource={data} scroll={{y:300}}/>componentDidMount(){ //一进来就滚动 setTimeout(()=>{ //加定时器 因为 可能 table还没渲染 完就 获取元素 防止

<DatePicker defaultValue={time&&moment(time)} format={dateFormat} />//或者三目 <DatePicker defaultValue={time?moment(time):undefined} format={dateFormat} />报错信息：value.locale is not a functionUncaught Error: The value/defaultVal...

前言：antd Tree组件带搜索，官网示例感觉很麻烦，不容易让人懂，我就自己实现了一个。antd 3.xTree带搜索(官网示例)antd 4.x Tree带搜索（官网示例）实现代码：一、这个是搜索到后，包含字符标红import React, { Component } from 'react';import { Form, Input, Tree } from 'antd';const TreeNode=Tree.TreeNode;const { Search } = I

一、报错信息：Warning: You cannot set a form field before rendering a field associated with the value.警告：在呈现与值关联的字段之前，不能设置表单字段。原因：这个是使用Form表单时会出现,原因时使用表单setFieldsValue时，有的字段设置了，但Form里不存在这个field。需要保证赋值的数据中的各项要在form的field中。解决方案：示例：Form里有两个字段name和passw..

一、react antd表格td内容过长显示三个点一、问题描述表格过td内容过长，想要显示三个点。因为过长会换行导致，表格很不好看。想要实现的效果，这样不影响象美观。二、实现步骤import React, { Component } from 'react';import { Table, Input, TreeSelect,Tooltip } from 'antd';class Index extends Component { constructor..

问题描述：antd表格固定后出现对不齐的现象，比如设置了fixed。如下图这个是官方的bug，在后续版本修复了在3.26.1里修复了。antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952解决方案：1.升级版本（方案一）但对于老项目，升级成本高或者暂时无法升级的就只能用样式强行控制了2.样式控制（方案二） (1).github 上antd issues 19952给了一个方案...

一、antd Tooltip 组件设置宽度不生效antd:3x实际上4x也可以。默认用法：title是要显示的文字 <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter> <Button>Arrow points to center / 箭头指向中心</Button> </Tooltip>我想要改变显示出的宽度，查找api发现使用ove...

前言：项目中使用antd-Tree组件（树形组件），要求默认展开编辑时默认选中，但是展开之后在点击收缩，和选中就无法选中了。必须配合onExpand和onCheck事件。一、项目环境react: 16antd :3.x （本篇内容也适用于antd 4x版本）二、使用Tree业务要求：默认展开树结构引入Tree和TreeNode写生成树结构函数添加展开key值和选中key值一般不会使用defaultCheckedKeys和defau...

前言：最近再用Tree组件做项目，记录一下使用方法。一、预期的效果antd-tree带搜索框的示例（官网）：官网只是标红我预期的效果是搜索并且标红，只保留包含搜索的值。二、antd-tree组件带搜索框的使用及踩坑（只保留搜索的内容并且标红）import React, { Component } from 'react';import { Tree, Input } from 'antd';import styles from '../../assets/index.cs.

前言：最近再用Tree组件做项目，记录一下使用方法。一、预期的效果antd-tree带搜索框的示例（官网）：官网只是标红我预期的效果是搜索并且标红（官网示例）。下面是我参考官网的示例写出来的。二、antd-tree组件带搜索框的使用及踩坑（只标红）import React, { Component } from 'react';import { Tree, Input } from 'antd';import styles from '../../assets/index.

前言：项目中使用antd-Tree组件（树形组件），要求默认展开编辑时默认选中，但是展开之后在点击收缩，和选中就无法选中了。必须配合onExpand和onCheck事件。一、项目环境react: 16antd :3.x （本篇内容也适用于antd 4x版本）二、使用Tree 业务要求： 默认展开树结构，编辑时勾中已选中的引入Tree和TreeNode 写生成树结构函数 添加展开key值和选中key值代码如下： 一般不会使...

前言： 最近在做一个权限管理的项目，需要配置权限。业务给的要求在表格里，展示权限以及编辑权限。然后根据权限数组，动态展示模块。实现过程以及代码 效果图如下： antd里有Tree组件，但是明显我这个需求无法使用，所以只能自己实现。 主要实现（参考antd 相关组件API）： 1.全选，反选， 2.子级选中其父级选中，父级取消子级也取消。 主要代码：changeFlag方法（实现......

前言：antd表格设置了fixed属性后，在设置scroll:x的时候会出现空白间隙。如下图：解决方案： 1.动态计算宽度//动态计算columns width属性（width属性不要加单位px）countX = (arr) => { return arr.reduce((cur, next) => { return cur + (next.width ? next.width : 0) })}let columns=[{.

333

antd Select组件 filterOption使用在使用antd Select组件的filterOption的踩坑。如下是官网给出的示例： <Select showSearch style={{ width: 200 }} placeholder="Select a person" optionFi

项目里有个把表格导出为Excel的功能，使用的是react-html-table-to-excel实现的也很简单，记录一下。1.实现过程1.下载依赖:npm install --save react-html-table-to-excelnpm install --save react-html-table-to-excel2.导入：importReactHTMLTableToExcelfrom'react-html-table-to-excel'//导表import Rea...

最近使用antd的modal对话框，头部和底部需要自己定义一些其他的东西。在官方文档里找到了写法。一、效果这个是官方的效果图下面是我要实现的效果图：这个就需要对header,footer自定义了。二、实现过程查找antd官网发现title和footer都可以传入组件（html标签）这样就好办了，传入想要的效果和样式就好了。 <Modal title={//主要实现代码此处可传入一个ht...

前言：最近在做一个后台管理项目涉及到上传文件，使用antd里的Upload实现上传文件。记录一下遇到的问题和坑。1.要实现的效果我要实现的效果就是点击上传文件，选择完文件后点击ok(也就是提交表单后在上传)其实就是手动上传文件。下面我来介绍一下我的做法和我遇到的一些坑。2.实现步骤1.引入所需antd的部件import { Table, Button, Modal, Fo...

1.引入import{Layout,ConfigProvider,Button,Input,Modal,Form,Table,Pagination}from'antd';对应的组件<Form layout="vertical" onSubmit={this.handleSubmit}> <Form.Item label="E-m...

1.在使用react-antd,Table组件时报警告，虽然不影响效果但是，对于强迫症的人来说是无法接受的。react-dom.development.js?cada:506 Warning: Encountered two children with the same key, `null`. Keys should be unique so that components maintain...