ReactJS：通過對象循環

進出口新的反應和Im困惑如何映射我的對象到我的反應成分ReactJS：通過對象循環

我物體看起來像這樣

const LinkValue = [{ 
     'XYZ':['About Us','Core Values','Careers','contact Us'] 
    },{ 
     'Help':['Payments','Saved Cards','FAQ'] 
    }]

陣營組件

const LinkLoop = map(LinkValue,(value,key)=>{ 
     return(
       <div className="col-md-2 col-sm-3 col-xs-6" key={key}> 
       <div className="quicklinks-card"> 
        <h3>{value[key]}</h3> 
        <ul className="list-unstyled"> 

         <li> 
          <a href="#">value[key]</a> 
         </li> 
         <li> 
          <a href="#">value[key]</a> 
         </li> 
         <li> 
          <a href="#">value[key]</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     ) 
    })

林不清楚如何循環通過我的對象，也是我的對象值的長度不一樣

Exp ected輸出

<div className="col-md-2 col-sm-3 col-xs-6"> 
    <div className="quicklinks-card"> 
     <h3>XYZ</h3> 
      <ul className="list-unstyled"> 

        <li> 
         <a href="#">About Us</a> 
        </li> 
        <li> 
         <a href="#">Core Values</a> 
        </li> 
        <li> 
         <a href="#"> Careers </a> 
        </li> 
        <li> 
         <a href="#">contact Us</a> 
        </li> 
      </ul> 
    </div> 
</div> 
<div className="col-md-2 col-sm-3 col-xs-6"> 
    <div className="quicklinks-card"> 
     <h3>XYZ</h3> 
      <ul className="list-unstyled"> 


        <li> 
         <a href="#"> Payments </a> 
        </li> 
        <li> 
         <a href="#"> Saved Cards </a> 
        </li> 
        <li> 
         <a href="#"> FAQ </a> 
        </li> 
      </ul> 
    </div> 
</div>

我想通過我的對象有循環，並將其放在我的組件..提前

感謝。

來源

2017-04-23 Coeus

有點糊塗了你的代碼，我認爲在'值[關鍵]'給陣列，這對''標籤不好。你能發佈預期的輸出嗎？ –

數組中的每個對象是否只有一個鍵，後面跟着一個數組，或者可能有多個鍵 –

感謝您的幫助。我已經添加了我的預期輸出。希望這可以讓事情變得清晰 – Coeus

您應該使用Object.keys(obj)[0]拿到第一項，然後從這些密鑰使用map映射陣列

const LinkValue = [{ 
      'XYZ':['About Us','Core Values','Careers','contact Us'] 
     },{ 
      'Help':['Payments','Saved Cards','FAQ'] 
     }] 

    const LinkLoop = LinkValue.map((value,key)=>{ 
      return(
        <div className="col-md-2 col-sm-3 col-xs-6" key={key}> 
          <div className="quicklinks-card"> 
          <h3>{Object.keys(value)[0]}</h3> 
          <ul className="list-unstyled"> 
            {value[Object.keys(value)[0]].map((obj, idx) => (
             <li key={idx}> 
              <a href="#">{obj}</a> 
             </li> 

           ))} 

          </ul> 
         </div> 
        </div> 
      ) 
     })

來源

2017-04-23 18:17:21

方式來快速.... :) –

爲嵌套循環具有相同的變量名是個好主意嗎？ –

@PriyeshKumar OP說，內部對象只有一個鍵，因此我修改了答案，不要循環鍵，但只使用第一個 –

ReactJS：通過對象循環

回答

相關問題