Question

所以我想打印一组嵌套列表，其中包含围绕某些元素的反应组件。数组看起来像这样（1和-1表示在水平上移动得更深）：

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

我想呈现像

<ol>
  <li><SomeComponent>value</SomeComponent></li>  
  <li><SomeComponent>another value</SomeComponent></li>
  <ol>
    <li><SomeComponent>third value</SomeComponent></li>
  </ol>
<li><SomeComponent>fourth value</SomeComponent></li>

我现在拥有的是：

 <ol>{linkArray.map(link =>{
     if (link == 1) {
       return <ol>;
     } else if (link == -1) {
       return </ol>;
     }
     else
       return <li><SomeComponent>{link}</SomeComponent></li>;
 })}
 </ol>

这不会编译，我假设它是因为你不能只在地图中包含一个没有结束标记的开始标记。

Answer 1

<ol>和</ol>都不是有效的JSX，这就是您当前代码失败的原因。

我的建议是重塑您的数据结构，这样您就不会依赖1和-1来告诉您何时上升或下降嵌套级别。这样的事情会更容易使用：

const linkArray = ['value', 'another value', ['third value'], 'fourth value']

这样，您的数据结构与所需的输出具有相同的形状。

从这里开始，我们可以定义一个递归函数，它会在遇到字符串时呈现新的<li>元素，并在遇到数组时呈现新的<ol>元素：

const nestedList = link => {
  if (link instanceof Array) {
    return <ol>{link.map(nestedList)}</ol>;
  } else {
    return <li>{link}</li>;
  }
}

然后在主要组件的渲染方法中返回以下内容（调用我们刚刚定义的函数包含在外部<ol>标记集中）：

<ol>{linkArray.map(nestedList)}</ol>

呈现以下HTML：

<ol>
  <li>value</li>
  <li>another value</li>
  <ol>
    <li>third value</li>
  </ol>
  <li>fourth value</li>
</ol>

哪个是所需的输出（减去<SomeComponent>标签，我为了简单起见而遗漏了这些标签 - 它们不会影响逻辑）。

使用开始和结束标记的React地图

1 个答案: