React如何根据含层级标识的数组渲染嵌套列表？

Ah, I feel your pain here—this is a super common JSX gotcha! You’re exactly right about why it’s failing: React won’t let you return unpaired opening or closing tags from map() (or any render logic, really). JSX requires every piece you render to be a complete, self-contained element—you can’t split <ol> and </ol> across separate iterations like that.

Let’s fix this by first turning your flat array into a nested tree structure that mirrors the list hierarchy you want, then recursively rendering that structure into nested <ol> lists. Here’s a step-by-step breakdown:

1. Convert the flat array to a nested tree #

First, we’ll write a simple helper function to transform your linkArray into a nested object structure. This makes rendering way cleaner later on:

function buildNestedList(arr) {
  // Use a stack to keep track of the current list level we're building
  const stack = [[]];
  
  for (const item of arr) {
    if (item === 1) {
      // Hit a "level down" signal: create a sublist under the last item
      const lastItem = stack[stack.length - 1].pop();
      lastItem.children = [];
      stack.push(lastItem.children);
    } else if (item === -1) {
      // Hit a "level up" signal: move back to the parent list
      stack.pop();
    } else {
      // Regular list item: add it to the current level
      stack[stack.length - 1].push({ value: item, children: null });
    }
  }
  
  return stack[0];
}

2. Build a recursive component for nested lists #

Next, we’ll make a reusable component that takes our nested tree and renders it into proper <ol> elements. This component will call itself whenever it finds an item with child elements (our nested sublists):

import SomeComponent from './SomeComponent'; // Don't forget to import your custom component

function NestedOl({ items }) {
  return (
    <ol>
      {items.map((item, index) => (
        <li key={index}>
          <SomeComponent>{item.value}</SomeComponent>
          {/* If the item has children, render a nested list */}
          {item.children && <NestedOl items={item.children} />}
        </li>
      ))}
    </ol>
  );
}

3. Put it all together in your app #

Finally, convert your flat array to the nested structure and render it with the NestedOl component:

const linkArray = ['value','another value',1,'third value',-1,'fourth value'];

function YourComponent() {
  const nestedListData = buildNestedList(linkArray);
  return <NestedOl items={nestedListData} />;
}

Why this works #

Instead of fighting React’s requirement for complete elements, we first structure our data to match the UI hierarchy we need. The recursive component then handles rendering each level of the list, including any nested sublists. This aligns perfectly with how React expects you to build UIs, and it’s way easier to debug and extend if your list gets more complex later.

If you wanted to skip the helper function, you could build the JSX elements directly using a stack, but the tree-based approach is far more readable and maintainable.

内容的提问来源于stack exchange，提问作者liam paris