react antd 默认展开的踩坑及注意事项（明明写了expendKeys却不起作用，expendKeys注意事项）

前言：
项目中使用antd-Tree组件（树形组件），要求默认展开编辑时默认选中，但是展开之后在点击收缩，和选中就无法选中了。必须配合onExpand和onCheck事件。

一、项目环境
react: 16 

antd :3.x （本篇内容也适用于antd 4x版本）

二、使用Tree
        业务要求：

               默认展开树结构

引入Tree和TreeNode
写生成树结构函数
添加展开key值和选中key值
一般不会使用defaultCheckedKeys和defaultExpandedKeys,要实现业务要求，需要expandedKeys和onExpand、checkedKeys和onCheck结合使用。

具体可以参考这个：react-antd Tree(树形组件)默认展开和选中踩坑及使用

遇到的问题：

设置了expandedKeys={expandedKeys} //默认展开的key却不起作用，如果代码没问题就有可能是key值类型有问题，强制类型相同。

在线运行CodePen Home antd tree默认展开

1.设置了expandedKeys=["175","176"]，key 175却不起作用,从这里可以看出expandedKeys对key的type也是有要求，必须类型相同。

 下面的treeData 的key 175 的type是number，key 176的type是string.

 如果想要两个都生效就得这样：

expandedKeys=[175,"176"]  //加上引号就不起作用了。

当然如果key本来就是字符串，就没什么问题了，expandedKeys不管是字符串类型（string）还是数字类型(number)都可以。

官网api是让传数组字符串

expandedKeys

（受控）展开指定的树节点

string[]

[]

antd v4 tree API

const {  Tree  } = antd;
const treeData = [
  {
    title: 'parent 1',
    key: 175,
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '176',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: (
              <span
                style={{
                  color: '#1890ff',
                }}
              >
                sss
              </span>
            ),
            key: '0-0-1-0',
          },
        ],
      },
    ],
  },
];

const Demo = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };
const expandedKeys=["175","176"]; //这样key 175不起作用,[175,"176"]这样两个都生效了
  return (
    <Tree
      checkable
      // defaultExpandedKeys={['0-0-0', '0-0-1']}
      // defaultSelectedKeys={['0-0-0', '0-0-1']}
      // defaultCheckedKeys={['0-0-0', '0-0-1']}
     expandedKeys={expandedKeys} //默认展开的key

      onSelect={onSelect}
      onCheck={onCheck}
      treeData={treeData}
    />
  );
};

ReactDOM.render(<Demo />, mountNode);

（2）

 我用 下面这个设置 展开key不起作用。加了个拓展运算符就行了 很神奇。

this.setState({ expandedKeys: expandedKeys });

Tree rendered 之后设置 treeData，expandedKeys 没有生效

this.setState({ expandedKeys: [...expandedKeys] });

解决方案：

就是转换类型就可以了

包括select组件 设置 默认值 时 也是需要 全等 ，类型相同才可以

select 赋值注意事项 ：

antd select 赋值的注意事项，值赋不上的解决方案（必须类型相同才可以）https://mp.csdn.net/mp_blog/creation/editor/121977734