时间戳

首页 > 解决方案 > 如何构建 React 复选框树

javascript - 如何构建 React 复选框树

问题描述

我正在尝试使用这样的复选框树组件：https://www.npmjs.com/package/react-checkbox-tree，但我正在存储我在 Redux 中选择的项目。此外，我实际存储的唯一项目是树中的叶节点。因此，例如，我将拥有用于渲染树的完整选项数据：

const fam = {
  cuz2: {
    name: 'cuz2',
    children: {
      cuzKid2: {
        name: 'cuzKid2',
        children: {
        }
      }
    }
  },
  grandpa: {
    name: 'grandpa',
    children: {
      dad: {
        name: 'dad',
        children: {
          me: {
           name: 'me',
           children: {}
          },
          sis: {
           name: 'sis',
           children: {}
          }
        }
      },
      aunt: {
        name: 'aunt',
        children: {
          cuz: {
            name: 'cuz',
            children: {
              name: 'cuzkid',
              children: {}
            }
          }
        }
    }
  }
}

以及存储所选项目的单独对象。如果选中每个复选框，以下将是唯一出现的项目：

const selected = {
 cuz2: true,
 me: true,
 sis: true,
 cuz: true
}

我似乎在努力使用这种方法让 UI 根据对象确定要完全、部分或未选中哪些框selected。我想知道是否有人可以推荐另一种实现这一目标的策略。

标签： javascriptreactjs

解决方案

所以我使用了react-checkbox-tree但我已经定制了一些图标以便使用另一个图标库。

检查我在沙盒上的示例：

推荐阅读