根據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

動態呈現<div>組件集合的HTML（即priceSize ， agentDetails等）的簡單解決方案將通過switch語句。

首先，確保將HTML定義為有效組件（即主導大寫）：

var SubjectProperty = <div>HTML goes here</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>

接下來，更新呈現report_sequence數組的組件。 引入上面提到的switch思想的一種方法是通過本地定義的方法：

render() {

    /* Define a local helper that renders the component corresponding to
    a specific key  */
    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/>;
      }

      return null;
   }

   /* Invoke locally defined renderItem() method to dynamically render
   each list item based on item's key */
   return report_sequence.map((data) => 
       <div key={data.key} className={data.key}>
       { renderItem(data.key) }
       </div>)
} 

Answer 2

在這里你有你的組件模擬：

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>

這里是map將呈現適當的組件

const componentMap = {
  [1]: () => <PriceSize />
  [2]: () => <AgentDetails /> 
  [3]: () => <MappedHouses /> 
  [4]: () => <SideComps /> 
  [5]: () => <PriceDays /> 
}

在這里你有你的渲染功能和：

• 當動態渲染組件需要添加key屬性時，允許通過React以某種方式識別它們，我假設你在這個數據集中有一些像ID這樣的屬性（可以是索引或任何唯一的）
• 我假設在映射數據集中有類似的東西，它允許渲染適當的組件，
• 在大括號中，我正在檢查map是否具有給定key某些value ，如果是，我調用它。

碼：

render() {
      report_sequence.map((data) => 
        return (
          <div className={data.key} key={data.id}>
            {this.componentMap[data.type] && this.componentMap[data.type]()}
          </div>
        );
      )
    }

Answer 3

這兩種方法都適用於動態數據呈現。

    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;
      }

   }