Javascript如何循环，直到你找不到属性（React）

Question

好吧，我很难为这个对象。

{ 
    name:"asd", 
    age: 17, 
    workers:[ 
     { 
      name:"asd", 
      age: 17, 
      workers:[ 
       { 
        name:"asd", 
        age: 17, 
        workers:[ 
         { 
          name:"asd", 
          age: 17 
         } 
        ] 
       } 
      ] 
     }, 
     { 
      name:"asd", 
      age: 17, 
      workers:[ 
       { 
        name:"asd", 
        age: 17 
       }, 
       { 
        name:"asd", 
        age: 17 
       }, 
       { 
        name:"asd", 
        age: 17 
       } 
      ] 
     } 
    ] 
} 

好吧，我的问题是，我想循环这个对象。查找它是否具有工人属性，然后呈现值。我只是无法找到解决这个问题的方法。

这是我现在拥有的。

if (boss.hasOwnProperty("workers")){ 
    <div> {{boss.name}} 
     boss.workers.map(function(w){ 
      if (w.hasOwnProperty("workers")){ 
       <div> 
       {{w.name}} 
        w.workers.map(function(a){ 
         <div> {{a.name}}</div> 
        } 
       </div> 
      } 
     }) 
    </div> 
} 

这有效，但它非常困难，当我必须处理更深的嵌套结构。 （在工作时，它是一个7层嵌套数组，在3和7之间变化）

我想要的是1或2个循环，只是检查属性是否在对象内，因此它继续使它不能找到它。

对不起，我的英语不是最好的。

Answer 1

您可以创建一个功能组件渲染当前节点及其工作人员递归。

function Worker({node}) { 
 
    return ( 
 
    <div> 
 
     {node.name} 
 
     <ul>   
 
     {node.workers && node.workers.map((w) => 
 
      <li><Worker node={w} /></li> 
 
     )} 
 
     </ul> 
 
    </div> 
 
); 
 
} 
 

 
const data = { 
 
    name:"asd", 
 
    age: 17, 
 
    workers:[ 
 
     { 
 
      name:"asd", 
 
      age: 17, 
 
      workers:[ 
 
       { 
 
        name:"asd", 
 
        age: 17, 
 
        workers:[ 
 
         { 
 
          name:"asd", 
 
          age: 17 
 
         } 
 
        ] 
 
       } 
 
      ] 
 
     }, 
 
     { 
 
      name:"asd", 
 
      age: 17, 
 
      workers:[ 
 
       { 
 
        name:"asd", 
 
        age: 17 
 
       }, 
 
       { 
 
        name:"asd", 
 
        age: 17 
 
       }, 
 
       { 
 
        name:"asd", 
 
        age: 17 
 
       } 
 
      ] 
 
     } 
 
    ] 
 
} 
 

 

 

 
ReactDOM.render(<Worker node={data} />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 2

可以使用，检查是否有当前节点的工人属性和递归函数，如果有更深入的工作节点，做同样的