Реагируйте на карту с открывающими и закрывающими тегами

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>, которые я оставил для простоты - они не влияют на логику).