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

该库提供了basic example of how to render a tree with selected and/or expanded nodes。

您需要做的是：

set up the nodes with a unique 'value'
Choose which items should be selected (it may comes from Redux)
通过nodes & checked list to the CheckBox constructor
还要确保在用户选择/取消选择时，您更新了UI properly using the state

您的代码应与此类似：

import React from 'react';
import CheckboxTree from 'react-checkbox-tree';

const nodes = [{
  value: '/cuz2',
  label: 'cuz2',
  children: [],
},
  // other nodes
];

class BasicExample extends React.Component {
  state = {
    checked: [
      '/cuz2'
    ],
    expanded: [
      '/cuz2',
    ],
  };

  constructor(props) {
    super(props);

    this.onCheck = this.onCheck.bind(this);
    this.onExpand = this.onExpand.bind(this);
  }

  onCheck(checked) {
    this.setState({
      checked
    });
  }

  onExpand(expanded) {
    this.setState({
      expanded
    });
  }

  render() {
    const {
      checked,
      expanded
    } = this.state;

    return (<
      CheckboxTree checked={
        checked
      }
      expanded={
        expanded
      }
      nodes={
        nodes
      }
      onCheck={
        this.onCheck
      }
      onExpand={
        this.onExpand
      }
    />
    );
  }
}

export default BasicExample;

Answer 2

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

Check my example on sandbox:

如何构建React复选框树

2 个答案: