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

简介: 本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。

很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用。
今天碰到了一个很恶心的问题,就是在给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>}
                {
   <TreeSelect
                    treeData={
   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:

        <RSTreeSelect
              title={
   '选择文件'}
              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喽

目录
相关文章
|
23天前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
45 8
|
21天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
109 2
|
1天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
10 2
|
8天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
27 8
|
8天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
20天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
13 1
|
26天前
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
36 3
|
2月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
34 2
|
20天前
|
前端开发 JavaScript API
自定义React Hooks综合指南
本文介绍了React Hooks及其在组件开发中的作用,重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook,并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
33 0
|
20天前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
27 0