Любая помощь для дерева флажков в React?

Question

Я новичок в React. Извините за вопрос. Я хочу создать дерево флажков в React с файлом ниже db.json. Как я могу создать это? Я нашел что-то в react-checkbox-tree в NPM, но когда я проверял один элемент, все элементы выбирались.

Я сделал все, как упомянуто на npm странице react-checkbox-tree, но это не сработало.

  {
    "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"
  }
]  

Вот мой компонент приложения:

    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

Вам необходимо переопределить или изменить данные. json объект такой же, как библиотека поддерживает.

Например

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

Вот ваш пример, который вам нужно обновить, надеюсь, он вам поможет.

Приложение. 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"
  }
]

Я внес несколько изменений в данные . json файл, вам нужно изменить таким образом, и ваша проблема будет решена.