使用打开和关闭标签来反应地图

Question

So i want to print a group of nested lists with react components around certain elements. the array looks like this (with 1 and -1 indicating to move deeper in levels):

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

which i want to render like

<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>

what i have now is:

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

this won't compile and i'm assuming it's because you can't just include an opening tag without a closing tag in map.

Answer 1

Neither <ol> nor </ol> are valid JSX, which is why your current code fails.

My advice would be to reshape your data structure such that you are not relying on the 1 and -1 to tell you when to go up or down a level in nesting. Something like this would be easier to work with:

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

This way, your data structure has the same shape as the desired output.

From here, we can define a recursive function, which will render a new <li> element when it encounters a string, and a new <ol> element when it encounters an array:

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

Then return the following in your main component's render method (a call to the function we just defined wrapped in an outer set of <ol> tags):

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

The following HTML is rendered:

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

Which is the desired output (minus the <SomeComponent> tags, which I left out for simplicity's sake - they don't affect the logic).