react-checkbox-tree 不展开

Question

我是新手。我使用 react-checkbox-tree 包创建了一个复选框树。问题是当我点击树中的一个项目时，它没有在应该展开的时候展开。

我可以做些什么来修复它

提前致谢...

这里是应用程序的沙盒 link：sandbox

这是我的 JSON 数据库：

[
    {
    "mailProcessingCenters": [
      {
        "value": "AEAUHA",
        "name": "ABU DHABI"
      },
      {
        "value": "AEDXBA",
        "name": "DUBAI"
      },
      {
        "value": "AEDXBB",
        "name": "DUBAI RASID SEA-PORT"
      },
      {
        "value": "AEDXBD",
        "name": "DUBAI TRANSIT / HUB"
      },
      {
        "value": "AEDXBE",
        "name": "DUBAI - SOMALIA"
      },
      {
        "value": "AUSYDK",
        "name": "SYDNEY K (EMIRATES - DIRECT LINK)"
      },
      {
        "value": "GBLONO",
        "name": "LONDON"
      },
      {
        "value": "SGSINO",
        "name": "SINGAPORE"
      },
      {
        "value": "SGSINQ",
        "name": "SINGAPORE Q, UAE"
      },
      {
        "value": "USCHIE",
        "name": "CHICAGO E"
      },
      {
        "value": "USJECU",
        "name": "NEW JERSEY U EMIRATES POST"
      }
    ],
    "value": "J1CAEA",
    "shortvalue": "AEA",
    "label": "EmiratesPost"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "AFKBLA",
        "name": "KABUL"
      },
      {
        "value": "AFKBLC",
        "name": "KABUL C"
      },
      {
        "value": "AFKBLS",
        "name": "KABUL EMS SHAHEEN POST"
      }
    ],
    "value": "J1CAFA",
    "shortvalue": "AFA",
    "label": "Afghan Post"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "AGANUA",
        "name": "ST JOHNS, A, ANTIGUA AND BARBUDA"
      },
      {
        "value": "AGANUB",
        "name": "ST JOHNS, B, ANTIGUA AND BARBUDA"
      },
      {
        "value": "AGANUC",
        "name": "ST JOHNS, C, ANTIGUA AND BARBUDA"
      }
    ],
    "value": "J1CAGA",
    "shortvalue": "AGA",
    "label": "GPO Antigua"
  },
  {
    "mailProcessingCenters": [],
    "value": "J1CAIA",
    "shortvalue": "AIA",
    "label": "AnguillaPost"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "ALTIAA",
        "name": "TIRANA ENTRANGER"
      }
    ],
    "value": "J1CALA",
    "shortvalue": "ALA",
    "label": "Albanian PT"
  },
  {
    "mailProcessingCenters": [
      {
        "value": "AMEVNA",
        "name": "YEREVAN"
      },
      {
        "value": "AMEVNB",
        "name": "YEREVAN PI-2"
      },
      {
        "value": "AMEVNC",
        "name": "YEREVAN PI-3"
      },
      {
        "value": "AMEVND",
        "name": "YEREVAN EMS"
      }
    ],
    "value": "J1CAMA",
    "shortvalue": "AMA",
    "label": "Haypost AM"
  },
  {
    "mailProcessingCenters": [],
    "value": "J1CANA",
    "shortvalue": "ANA",
    "label": "POST NA NV"
  }
]

这是我的 App.js：

class App extends React.Component {
  state = {
    checked: [],
    expanded: [],
    database: db
  };

  render() {
    console.log(this.state);

    return (
      <div>
        <div onClick={secildi}>
          <CheckboxTree
            nodes={this.state.database}
            checked={this.state.checked}
            expanded={this.state.expanded}
            onCheck={checked => this.setState({ checked })}
            onExpand={expanded => this.setState({ expanded })}
          />
        </div>

        <div />
      </div>
    );
  }
}

Answer 1

您必须将 mailProcessingCenters 重命名为 children 并且按照 Nicolò Cozzani 的建议 name 应该重命名为 label。

我可以在 react-checkbox-tree 演示中看到，他们需要 children 数组才能使其成为展开的树。

const nodes = [{
    value: 'mars',
    label: 'Mars',
    children: [ //<--------this one
        { value: 'phobos', label: 'Phobos' }, // <----name should be renamed as label
        { value: 'deimos', label: 'Deimos' },
    ],
}];

react-checkbox-tree 不展开

react-checkbox-tree doesn't expand

javascript

reactjs

react-state

Updated code sand box.