在 html 列表 ul li 中显示嵌套循环对象答案

【问题标题】：Display nested loops object in html list ul li在 html 列表 ul li 中显示嵌套循环对象
【发布时间】：2020-06-03 16:42:15
【问题描述】：

嗨，我有这个对象

{
 levela: {
  levelb: {
    levelc: [],
    leveld: []
  }
 }, 
 level1: {
   level2: {
     level3: {
       level4:[]
     }
   }
 }
}

我想把它转换成这样的 ul li 项目，如果我的 object[key] 是一个数组，我只想停下来

<ul>
 <li>levela
  <ul>
   <li>levelb
      <ul>
         <li>levelc</li>
      </ul>
   </li>

  </ul>
 </li>
 <li>level1</li>
  ....
</ul>

谢谢

【问题讨论】：

标签： javascript reactjs object html-lists nested-loops

【解决方案1】：

是时候使用generator function了！

希望你不要经常渲染那个组件...

const {
  useState,
  useEffect
} = React;

const App = () => {
  const [data, setData] = useState({
    levela: {
      levelb: {
        levelc: [],
        leveld: []
      }
    },
    level1: {
      level2: {
        level3: {
          level4: []
        }
      }
    }
  })

  const renderData = (data) => {
    let id = 1;
    
    function* renderRecurse(data) {
      if (Array.isArray(data)) {
        for (let item of data) {
          yield (<li key={id++}>{item}</li>)
        }
        return;
      }

      for (let [key, value] of Object.entries(data)) {
        yield (<ul key={id++}><li key={id++}>{key}</li>{[...renderRecurse(value)]}</ul>)
      }
    }
    
    return [...renderRecurse(data)]
  }

  return <div>{renderData(data)}</div>
}

ReactDOM.render(<App />,
  document.getElementById('root')
);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

【讨论】：