React 中的树视图

Question

这是我的数据：

{
  "studentId": "P1",
  "assignments": [
    {
      "CourseId": 111,
      "subjectId": "",
      "topics": [
        {
          "topicId": "t1",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 112,
      "subjectId": "s1",
      "topics": [
        {
          "topicId": "t1",
          "isAssigned": false
        },
        {
          "topicId": "t2",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 111,
      "subjectId": "",
      "topics": [
        {
          "topicId": "t3",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 113,
      "subjectId": "s2",
      "topics": [
        {
          "topicId": "t4",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 114,
      "subjectId": "",
      "topics": [
        {
          "topicId": "t5",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 115,
      "subjectId": "s4",
      "topics": [
        {
          "topicId": "t6",
          "isAssigned": false
        }
      ]
    }
  ],
  "updatedOn": null,
  "updatedBy": null
}

我正在尝试以此为基础在 React 中创建一个树视图。我正在使用“react-checkbox-tree”。仅在分配对象上创建树视图，因为其余数据仅用于保存功能。

我已经创建了基本架构，因为我在模态中需要它 window。它适用于硬编码数据，但我发现很难将我的数据集转换为树视图所需的格式。下面是工作正常的硬编码对象。

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

Answer 1

试试下面的代码。这基本上是将所有第一个值转换为对象 {value.., label..} 如果您的代码中有任何特定条件，它不应始终考虑第一个对象，那么请在您的问题中提及它。

    const assignments = [
      {
        "CourseId": 111,
        "subjectId": "",
        "topics": [
          {
            "topicId": "t1",
            "isAssigned": false
          }
        ]
      },
      {
        "CourseId": 112,
        "subjectId": "s1",
        "topics": [
          {
            "topicId": "t1",
            "isAssigned": false
          },
          {
            "topicId": "t2",
            "isAssigned": false
          }
        ]
      },
      {
        "CourseId": 111,
        "subjectId": "",
        "topics": [
          {
            "topicId": "t3",
            "isAssigned": false
          }
        ]
      },
      {
        "CourseId": 113,
        "subjectId": "s2",
        "topics": [
          {
            "topicId": "t4",
            "isAssigned": false
          }
        ]
      },
      {
        "CourseId": 114,
        "subjectId": "",
        "topics": [
          {
            "topicId": "t5",
            "isAssigned": false
          }
        ]
      },
      {
        "CourseId": 115,
        "subjectId": "s4",
        "topics": [
          {
            "topicId": "t6",
            "isAssigned": false
          }
        ]
      }
    ];
const mapAssignment = (object, key) => ({value: key, label: object[key]});

console.log(assignments.map(ass => {
  let assObj = {...mapAssignment(ass, 'CourseId')};
  if(ass.subjectId) {
    assObj['children'] = mapAssignment(ass, 'subjectId');
    if(ass.topics.length > 0) assObj['children']['children'] = ass.topics.map(child => mapAssignment(child, 'topicId'))
  }
  else if(ass.topics.length > 0) assObj['children'] = ass.topics.map(child => mapAssignment(child, 'topicId'))
  return assObj;
}));

React 中的树视图

Tree view in React

reactjs

treeview