从多层嵌套对象的每一层创建一个 JSX 列表列答案

【问题标题】：Create a JSX list column from every level of multi-level nested object从多层嵌套对象的每一层创建一个 JSX 列表列
【发布时间】：2021-09-04 09:28:33
【问题描述】：

我想将嵌套对象变成多级列。其中每一列代表嵌套对象中的一个级别。我还需要保持原始嵌套对象不变以进行状态管理。

示例嵌套对象

[
  {
    "id": "1.1",
    "displayLabel": "level 1.1",
    "selected": true,
    "options": [
      {
        "id": "2.1",
        "displayLabel": "level 2.1",
        "selected": true,
        "options": [
          {
            "id": "3.1",
            "displayLabel": "level 3.1",
            "selected": true,
            "options": []
          },
          {
            "id": "3.2",
            "displayLabel": "level 3.2",
            "selected": true,
            "options": []
          },
          {
            "id": "3.3",
            "displayLabel": "level 3.3",
            "selected": true,
            "options": []
          }
        ]
      },
      {
        "id": "2.2",
        "displayLabel": "level 2.2",
        "selected": true,
        "options": [
          {
            "id": "3.4",
            "displayLabel": "level 3.4",
            "selected": true,
            "options": []
          },
          {
            "id": "3.5",
            "displayLabel": "level 3.5",
            "selected": true,
            "options": []
          },
          {
            "id": "3.6",
            "displayLabel": "level 3.6",
            "selected": true,
            "options": []
          }
        ]
      }
    ]
  },
  {
    "id": "1.2",
    "displayLabel": "level 1.2",
    "selected": false,
    "options": [
      {
        "id": "2.3",
        "displayLabel": "level 2.3",
        "selected": false,
        "options": [
          {
            "id": "3.7",
            "displayLabel": "level 3.7",
            "selected": false,
            "options": []
          },
          {
            "id": "3.8",
            "displayLabel": "level 3.8",
            "selected": false,
            "options": []
          }
        ]
      }
    ]
  }
]

//我正在尝试递归渲染，但它会为每个嵌套对象创建新列。

  const levels = [];
    const PrintLevels = ({ hierarchy }) => {
      const list =[];
      hierarchy.forEach( level => {
        list.push(<li className=`${level.selected ? 'bold': ''}`>{level.displayLabel}</li>)
        if(level.options.length > 0 ) {
            PrintLevels( { hierarchy: level.options })
        }
        levels.push(<ul>{list}</ul>)
     })
     return levels;
    }

电流输出

First Level	Second Level	Third Level	Forth Level	Fifth Level
Level 1.1	Level 2.1	Level 3.1	Level 1.2.	Level 2.2
	.	Level 3.2	.	.
		Level 3.3	.	.

等等..

预期输出

First Level	Second Level	Third Level
Level 1.1	Level 2.1	Level 3.1
Level 1.2	Level 2.2	Level 3.2
	Level 2.3	Level 3.3
		Level 3.4
		Level 3.5
		Level 3.6
		Level 3.7
		Level 3.8

【问题讨论】：

SO 不是编码服务。请查看How to Ask，展示您尝试过的内容和无效的内容，并在可能的情况下提供您尝试的minimal reproducible example。
@pilchard 添加了我尝试过的代码。请提出问题。

标签： javascript reactjs react-hooks jsx

【解决方案1】：

const parseLevels = ( levelIndex, hierarchy, hierarchyLevels ) => {
    hierarchy.forEach( level => {
        const { id, displayLabel, selected, options } = level;
        if( !hierarchyLevels[ levelIndex ] ) {
            hierarchyLevels[ levelIndex ] = [ {id, displayLabel, selected} ];
        }else {
            hierarchyLevels[ levelIndex ] = [ ...hierarchyLevels[ levelIndex ], {id, displayLabel, selected} ];
        }
        if ( options.length ) {
            parseLevels( levelIndex + 1, options, hierarchyLevels );
        }
    } );
};


const PrintLevel = ( { level } ) => {
    return level.map( ( {selected, displayLabel} ) => <li className={`${selected ? 'bold': ''}`}>{displayLabel}</li> );
};
  
const PrintLevels = ( { levels } ) => {
return levels.map( ( level ) => <ul>
    <PrintLevel level={level} />
</ul> );
};

const hierarchyLevels = [];
parseLevels( 0, hierarchy, hierarchyLevels );

// render
<PrintLevels levels={hierarchyLevels} />

【讨论】：