javascript - React 中的复选框树有什么帮助吗？

Question

我是 React 的新手。抱歉提问。我想用下面的 db.json 文件在 React 中创建一个复选框树。我怎样才能创建它？我在 NPM 的 react-checkbox-tree 中找到了一些东西，但是当我选中一个项目时，所有项目都被选中。

我按照 react-checkbox-tree 的 npm 页面中提到的进行了所有操作，但没有成功。

  {
    "mailProcessingCenters": [
      {
        "code": "AIAXAA",
        "name": "ANGUILLA"
      }
    ],
    "code": "J1CA18",
    "shortCode": "A18",
    "shortName": "AnguillaPost"
  },
  {
    "mailProcessingCenters": [],
    "code": "J1CADA",
    "shortCode": "ADA",
    "shortName": "AndorraPost"
  },
  {
    "mailProcessingCenters": [
      {
        "code": "AEAUHA",
        "name": "ABU DHABI"
      },
      {
        "code": "AEDXBA",
        "name": "DUBAI"
      },
      {
        "code": "AEDXBB",
        "name": "DUBAI RASID SEA-PORT"
      },
      {
        "code": "AEDXBD",
        "name": "DUBAI TRANSIT / HUB"
      },
      {
        "code": "AEDXBE",
        "name": "DUBAI - SOMALIA"
      },
      {
        "code": "AUSYDK",
        "name": "SYDNEY K (EMIRATES - DIRECT LINK)"
      },
      {
        "code": "GBLONO",
        "name": "LONDON"
      },
      {
        "code": "SGSINO",
        "name": "SINGAPORE"
      },
      {
        "code": "SGSINQ",
        "name": "SINGAPORE Q, UAE"
      },
      {
        "code": "USCHIE",
        "name": "CHICAGO E"
      },
      {
        "code": "USJECU",
        "name": "NEW JERSEY U EMIRATES POST"
      }
    ],
    "code": "J1CAEA",
    "shortCode": "AEA",
    "shortName": "EmiratesPost"
  },
  {
    "mailProcessingCenters": [
      {
        "code": "AFKBLA",
        "name": "KABUL"
      },
      {
        "code": "AFKBLC",
        "name": "KABUL C"
      },
      {
        "code": "AFKBLS",
        "name": "KABUL EMS SHAHEEN POST"
      }
    ],
    "code": "J1CAFA",
    "shortCode": "AFA",
    "shortName": "Afghan Post"
  }
]  

这是我的 App 组件:

    import React from 'react';
    import db from './assets/data.json'
    import CheckboxTree from 'react-checkbox-tree';
    import 'react-checkbox-tree/src/less/react-checkbox-tree.less';
    import DataTable from 'react-data-table-component';


    const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' },
    { id: 2, title: 'XXXX', year: '1984' }];

    const columns = [
      {
        name: 'Title',
        selector: 'title',
        sortable: true,
      },
      {
        name: 'Year',
        selector: 'year',
        sortable: true,
        right: true,
      },
    ];


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

      }


      render() {

        return (
          <div >
            <DataTable
              title="Arnold Movies"
              columns={columns}
              data={data}
            />


            <CheckboxTree
              nodes={this.state.database}
              key={this.state.database.code}
              checked={this.state.checked}
              expanded={this.state.expanded}
              onCheck={checked => this.setState({ checked })}
              onExpand={expanded => this.setState({ expanded })}

            />

            ))
          }
          </div>
        )
      }

    }
    export default App;

Answer 1

我已经在代码沙箱中更新了您的代码，请查看链接:demo

您需要像 library 一样重新定义或更改您的 data.json 对象支持。

For Example

const nodes = [{
    value: 'mars',
    label: 'Mars',
    children: [
        { value: 'phobos', label: 'Phobos' },
        { value: 'deimos', label: 'Deimos' },
    ],
}];

这是您需要更新的示例，希望对您有所帮助。

App.js

import React from 'react';
import db from './assets/data.json'
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/src/less/react-checkbox-tree.less';
import DataTable from 'react-data-table-component';

const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' },
{ id: 2, title: 'XXXX', year: '1984' }];

const columns = [
  {
    name: 'Title',
    selector: 'title',
    sortable: true,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    right: true,
  },
];


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

  render() {
    return (
      <React.Fragment>
        <DataTable
          title="Arnold Movies"
          columns={columns}
          data={data}
        />
        <CheckboxTree
          nodes={this.state.database}
          key={this.state.database.code}
          checked={this.state.checked}
          expanded={this.state.expanded}
          onCheck={checked => this.setState({ checked })}
          onExpand={expanded => this.setState({ expanded })}
        />
      </React.Fragment>
    )
  }
}

export default App;

data.json

[
  {
    "value": "J1CA18",
    "label": "AnguillaPost",
    "mailProcessingCenters": [
      {
        "code": "AIAXAA",
        "name": "ANGUILLA"
      }
    ],
    "code": "J1CA18",
    "shortCode": "A18",
    "shortName": "AnguillaPost"
  },
  {
    "value": "J1CADA",
    "label": "AndorraPost",
    "mailProcessingCenters": [],
    "code": "J1CADA",
    "shortCode": "ADA",
    "shortName": "AndorraPost"
  },
  {
    "value": "J1CAEA",
    "label": "EmiratesPost",
    "mailProcessingCenters": [
      {
        "code": "AEAUHA",
        "name": "ABU DHABI"
      },
      {
        "code": "AEDXBA",
        "name": "DUBAI"
      },
      {
        "code": "AEDXBB",
        "name": "DUBAI RASID SEA-PORT"
      },
      {
        "code": "AEDXBD",
        "name": "DUBAI TRANSIT / HUB"
      },
      {
        "code": "AEDXBE",
        "name": "DUBAI - SOMALIA"
      },
      {
        "code": "AUSYDK",
        "name": "SYDNEY K (EMIRATES - DIRECT LINK)"
      },
      {
        "code": "GBLONO",
        "name": "LONDON"
      },
      {
        "code": "SGSINO",
        "name": "SINGAPORE"
      },
      {
        "code": "SGSINQ",
        "name": "SINGAPORE Q, UAE"
      },
      {
        "code": "USCHIE",
        "name": "CHICAGO E"
      },
      {
        "code": "USJECU",
        "name": "NEW JERSEY U EMIRATES POST"
      }
    ],
    "code": "J1CAEA",
    "shortCode": "AEA",
    "shortName": "EmiratesPost"
  },
  {
    "value": "J1CAFA",
    "label": "Afghan Post",
    "children": [
      {
        "value": "AFKBLA",
        "label": "KABUL"
      },
      {
        "value": "AFKBLC",
        "label": "KABUL C"
      },
      {
        "value": "AFKBLS",
        "label": "KABUL EMS SHAHEEN POST"
      }
    ],
    "mailProcessingCenters": [
      {
        "code": "AFKBLA",
        "name": "KABUL"
      },
      {
        "code": "AFKBLC",
        "name": "KABUL C"
      },
      {
        "code": "AFKBLS",
        "name": "KABUL EMS SHAHEEN POST"
      }
    ],
    "code": "J1CAFA",
    "shortCode": "AFA",
    "shortName": "Afghan Post"
  }
]

我对 data.json 文件做了一些改动，你需要这样改动，问题就会得到解决。