如何根據對象數組創建無序列表？

Question

我有一組對象，其模式是這樣的。

[
  { text: 'Contents', level: 2 },
  { text: 'h2 Heading', level: 2 },
  { text: 'h3 Heading', level: 3 },
  { text: 'h4 Heading', level: 4 },
  { text: 'Heading', level: 2 },
]

我想根據每個 object 的級別創建一個無序列表。因此，例如。 上面的數組應該顯示為：

<ul>
    <li>Contents</li>
    <li>
        h2 Heading
        <ul>
            <li>
                h3 Heading
                <ul>
                    <li>h4 Heading</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Heading</li>
</ul>

我可以檢查下一個 object 是否與前一個具有相同的級別。 並相應地處理查詢，但是有更好的解決方案嗎？ 或者任何可以正常工作的解決方案。

編輯 #1：剛才，我找到了大約 13 年前在這里提出的解決方案。 我可以設計元素的樣式，讓它感覺像是一個嵌套列表。 鏈接： 將標題層次結構生成為有序列表

不過，如果有更好的解決方案，請回復。

Answer 1

這是一個可能的解決方案。 您可以查看此鏈接以獲取反應式在線代碼編輯器。

const objects = [
  { text: "Contents", level: 2 },
  { text: "h2 Heading", level: 2 },
  { text: "h3 Heading", level: 3 },
  { text: "h4 Heading", level: 4 },
  { text: "Heading", level: 2 }
];

const getDisplayableObjects = () => {
  const arr = [];
  let targetArr;

  for (const obj of objects) {
    const { text, level } = obj;

    switch (level) {
      case 2:
        arr.push({ text, children: [] });
        break;
      case 3:
        targetArr = arr[arr.length - 1].children;
        targetArr.push({ text, children: [] });
        break;
      case 4:
        targetArr = arr[arr.length - 1].children;
        targetArr = targetArr[targetArr.length - 1].children;
        targetArr.push({ text, children: [] });
        break;
      default:
        break;
    }
  }

  return arr;
};

const App = () => {
  return (
    <>
      {getDisplayableObjects().map(({ text, children }) => (
        <ul>
          <li>
            {text}

            {children.map(({ text, children }) => (
              <ul>
                <li>{text}</li>

                {children.map(({ text, children }) => (
                  <ul>
                    <li>{text}</li>
                  </ul>
                ))}
              </ul>
            ))}
          </li>
        </ul>
      ))}
    </>
  );
};

export default App;

結果：