在html列表中显示嵌套循环对象

Question

嗨，我有这个对象

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

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

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

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

谢谢

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