Reactjs嵌套对象到嵌套html答案

【问题标题】：Reactjs nested object to nested htmlReactjs嵌套对象到嵌套html
【发布时间】：2021-12-23 09:40:25
【问题描述】：

我已经嵌套了 json 并想渲染为 input 但在嵌套的 html ul li 中，我已经拥有的是：

class Hello extends React.Component {
  render() {
  let Obj = {"success":true,"message":"Show All Categories In Tree","data":[{"id":1,"name":"a","slug":"a","order":1,"children":[{"id":2,"name":"comic book","slug":"comic book","order":2,"children":[{"id":3,"name":"Manway Comic Book","slug":"Manway Comic Book","order":3},{"id":4,"name":"Luxury comic book","slug":"Luxury comic book","order":4},{"id":5,"name":"Action comic book","slug":"Action comic book","order":5}]},{"id":6,"name":"textbook","slug":"textbook","order":1,"children":[{"id":7,"name":"commercial","slug":"commercial","order":2},{"id":8,"name":"finance","slug":"finance","order":3},{"id":9,"name":"Computer Science","slug":"Computer Science","order":4}]}]},{"id":10,"name":"electrical","slug":"electrical","order":1,"children":[{"id":11,"name":"TV","slug":"TV","order":2,"children":[{"id":12,"name":"monitor","slug":"monitor","order":3},{"id":13,"name":"Blu-ray","slug":"Blu-ray","order":3}]},{"id":14,"name":"phone","slug":"phone","order":1,"children":[{"id":15,"name":"Huawei","slug":"Huawei","order":3},{"id":16,"name":"iPhone","slug":"iPhone","order":3},{"id":17,"name":"samsung","slug":"samsung","order":3}]}]},{"id":20,"name":"xx","order":1}]};
let Data = Obj.data;

    return <div>
    <ul>
              {Data && Data.map(function(Cat, Index){
              let children = '';
              let sub_children = '';
              
              Cat.children && Cat.children.map(function(v){
              children = (<li><input defaultValue={v.name}/></li>)
              v.children && v.children.map(function(sub){
              sub_children = (<li><input defaultValue={sub.name}/></li>)
              })
              })
                  return (
                      <li key={Index}>
                          <input defaultValue={Cat.name}/>
                          <ul>{children}
                          <ul>{sub_children}</ul>
                          </ul>
                      </li>
                  )
              })}
              
              </ul>
    </div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
</div>

但问题是它不会呈现所有子项属于每个父项。而且我想这样做是不好的做法，知道问题和最佳做法是什么？

【问题讨论】：

标签： javascript reactjs typescript ecmascript-6 jsx

【解决方案1】：

请尝试使用箭头函数而不是常规函数。并将这段代码移到第一次返回之外

{Data && Data.map(function(Cat, Index){
          let children = '';
          let sub_children = '';
          
          Cat.children && Cat.children.map(function(v){
          children = (<li><input defaultValue={v.name}/></li>)
          v.children && v.children.map(function(sub){
          sub_children = (<li><input defaultValue={sub.name}/></li>)
          })
          })

【讨论】：