React给antd中TreeSelect组件左侧加自定义图标icon

很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用。
今天碰到了一个很恶心的问题，就是在给antd的treeSelect组件加左侧icon的时候，总是报一个警告，

Warning: Each child in a list should have a unique “key” prop.

告诉我们每一个节点都需要有一个唯一的key。

首先我这里简单的封装了一下treeSelect这个组件：

import React from 'react';
import { TreeSelect } from 'antd';
import 'antd/dist/antd.css';
import '../styles/rstreeselect.less';class RSTreeSelect extends React.PureComponent {constructor(props) {super(props);this.state = {}}static defaultProps = {title: "",treeData: [],}render() {let { title, treeData, ...rest } = this.props;return (<div className="rsselect">{title && <p className="rsselect-title">{title}：</p>}{<TreeSelecttreeData={treeData}{...rest}></TreeSelect>}</div>)}
}export default RSTreeSelect;

然后页面使用：

import RSTreeSelect from '../../component/RSTreeSelect';
import { FolderOpenOutlined, CarryOutOutlined } from '@ant-design/icons';const treeData = [{title: 'Node1',value: '1',disabled: true,children: [{title: 'Child Node1',disabled: true,value: '1-1',},{title: 'Child Node2',value: '1-2',children: ''},{title: 'Child Node2',value: '1-22',children: ''},{title: 'Child Node2',value: '1-233',children: ''},],},{title: 'Node2',value: '2',children: '',},];在render函数中的dom:<RSTreeSelecttitle={'选择文件'}value={this.state[`${item.keyName}`]}dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}treeData={this.treeData(treeData)}// treeData={item.keyAndValueList === '' || item.keyAndValueList === null ? [] : this.treeData(JSON.parse(item.keyAndValueList))}placeholder="请选择文件"treeIcon={true}onChange={(e) => { this.inputName(`${item.keyName}`, e) }}suffixIcon={<FolderOpenOutlined />}/>

仔treeData渲染文件夹数组之前调用了函数处理了数据结构

 treeData = (data) => data.map(item => {if (item.children) {item['icon'] = [<FolderOpenOutlined />]this.treeData(item.children)} else {item['icon'] = [<CarryOutOutlined/>]}return item})

这个时候就会报错，绞尽脑汁找到原因，原来引入的antd图标组件没有加key

正确的：

    treeData = (data) => data.map(item => {if (item.children) {item['icon'] = [<FolderOpenOutlined key={item.title}/>]this.treeData(item.children)} else {item['icon'] = [<CarryOutOutlined key={item.title}/>]}return item})

函数的作用就是递归自己给对象加icon属性。最重要的是对数据进行处理，我这里遇到一个小坑 key，记录一下。

可以按照自己的喜好体检icon喽

React给antd中TreeSelect组件左侧加自定义图标icon相关推荐

antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
react结合antd的Cascader组件实现pc端选择城市控件
react结合antd的Cascader组件实现pc端选择城市控件业务需求,网上找了好多,发现都不太满意,于是自己写了一个 1.实现如下提示: 数据地址点击 https://xf-12521862 ...
【HTMLCSS】【7】网址栏左侧出现的图标Icon
正文: 1,网址栏左侧出现的图标Icon,就是截图中的小图标 2,方案 <link rel="shortcut icon" href="http://example ...
IDEA 如何控制编辑左侧的功能图标 ICON
文章目录 IDEA 如何控制编辑左侧的功能图标 ICON 相关阅读关键词 1.操作步骤 2.找不到想要的图标 IDEA 如何控制编辑左侧的功能图标 ICON @ 如果觉得本文对你有帮助,可以一键三连 ...
对于 React 结合 Antd 的 Upload 组件实现图片上传
一. React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...
uniapp中map组件动态加载marks标记
之前在uniapp项目中用到地图都是用h5的方式实现的,比如用高德地图webapi可以不收uniapp的限制,uniapp中vue页面中map组件功能太少,nvue中css写的有蛋疼. 言归正传,ma ...
antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法
在用到antd的Form组件的时候,可能会用到自定义的规则,以我的项目为例:在输入名称的时候需要请求接口,校验的内容是后台返回的内容,所以这个时候需要用到自定义的校验规则屏幕快照 2019-06-1 ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
elementUI-添加自定义图标
elementui的小图标有限,跟UI给的不一样,这个时候咋办呢?百度走起....参考了两篇博主分享的自定义elementui中的图标和建立图标库,这里主要用到第一种实际中: elementU ...

React给antd中TreeSelect组件左侧加自定义图标icon

React给antd中TreeSelect组件左侧加自定义图标icon相关推荐

最新文章

热门文章