javascript - ant组件中联级选择的这种需求可以实现吗？

Question

产品提了个需求：联级组件中点击左侧单选按钮为选中，点击右侧则展开下一级。

想了很久都没有思路，请问有大神知道如何实现嘛？

Answer 1

这个demo好像可以实现这个需求哎，你看下：https://antdv.com/components/cascader-cn#components-cascader-...

至于样式可以使用css覆盖掉，交互也可以跟产品同学商量下

Answer 2

这个问题可以通过使用 Ant Design 的树形组件（Tree component）来解决。你需要使用 state 来跟踪选中的节点，并在点击事件中更新这个状态。

以下是一个基本的实现示例：

import React, { useState } from 'react';import { Tree } from 'antd';const { TreeNode } = Tree;function Demo() {  const [expandedKeys, setExpandedKeys] = useState([]);  const [checkedKeys, setCheckedKeys] = useState([]);  const onCheck = (checkedKeys) => {    setCheckedKeys(checkedKeys);  };  const onExpand = (expandedKeys) => {    setExpandedKeys(expandedKeys);  };  const data = [    {      title: '0-0',      key: '0-0',      children: [        {          title: '0-0-0',          key: '0-0-0',        },        {          title: '0-0-1',          key: '0-0-1',        },      ],    },    {      title: '0-1',      key: '0-1',    },  ];  return (    <Tree expandedKeys={expandedKeys} onExpand={onExpand}>      {data.map(item => (        <TreeNode title={item.title} key={item.key} disabled={checkedKeys.includes(item.key)} />      ))}    </Tree>  );}export default Demo;

在上述代码中，我们首先定义了两个状态：expandedKeys 和 checkedKeys，分别用于跟踪展开的节点和选中的节点。然后，我们创建了一个数据对象，其中包含我们的树形结构。最后，我们将每个节点渲染为一个 TreeNode，并使用 disabled 属性来阻止选中的节点被展开。