javascript - 根据 React.JS 中的对象数组动态呈现部分/div

Question

我有一个对象数组来在网页上显示数据，所有 div 都应该根据数组对象中的键(按此顺序)。

var priceSize = <div>HTML goes here</div>
var agentDetails = <div>HTML goes here</div>
var mappedHouses = <div>HTML goes here</div>
var sideComps = <div>HTML goes here</div>
var priceDays = <div>HTML goes here</div>

render() {
 return (
 report_sequence.map((data) => 
 <div className={data.key}>
  {
   data.key === 1 ? subjectProperty : 
   data.key === 2 ? priceSize : 
   data.key === 4 ? priceDays : 
   data.key === 5 ? sideComps : 
   data.key === 6 ? mappedHouses : 
   data.key === 9 ? agentDetails : ''
  }
 </div>
 )
 );
}

这是我的数组:

var report_sequence = [
    {key : 1, value : "SUBJECT PROPERTY OVERVIEW"},
    {key : 2, value : "PRICE & SIZE GRAPH"},
    {key : 9, value : "AGENT SUMMARY"},
    {key : 4, value : "PRICE & DAYS ON MARKET GRAPH"},
    {key : 6, value : "MAPPED HOUSES"},
    {key : 5, value : "SIDE BY SIDE COMPARISION"}
   ]

我希望 div 按照我的报告顺序排列。请帮忙。

Answer 1

这两种方法都适用于动态数据呈现。

    return (
     report_sequence.map((data) => 
     <div className={data.key}>
      {
       data.key === 1 ? subjectProperty : 
       data.key === 2 ? priceSize : 
       data.key === 4 ? priceDays : 
       data.key === 5 ? sideComps : 
       data.key === 6 ? mappedHouses : 
       data.key === 9 ? agentDetails : ''
      }
     </div>
     )

//Second approach using switch according to Dacre Denny

   const renderItem = (key) => {
      switch(key) {
        case 1: return subjectProperty;
        case 2: return priceSize;
        case 4: return priceDays;
        case 5: return sideComps;
        case 6: return mappedHouses;
        case 9: return agentDetails;
        default: return null;
      }

   }