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>}
                {<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喽