javascript - 如何构建 React 复选框树

Question

我正在尝试使用这样的复选框树组件: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 对象确定要完全、部分或取消选中哪些框。我想知道是否有人可以推荐另一种实现此目的的策略。

Answer 1

所以我用了react-checkbox-tree但我对图标进行了一些定制，以便使用另一个图标库。

Check my example on sandbox: