Javascript 根据React.JS中的对象数组动态渲染节/div

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

我希望根据我的报告顺序安排div。

---

请提供同样的帮助。

一个简单的解决方案可以通过

开关
语句动态呈现
组件集合（即
priceSize
、
agentDetails
等）的HTML

首先，确保您的HTML被定义为有效的组件（即前导大写）：

这里是您的组件模拟：

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>

这两种方法都适用于动态数据渲染

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

   }

返回(
报告序列图（（数据）=>
{
data.key==1？subjectProperty：
data.key==2？价格大小：
data.key==4？价格天数：
data.key==5？侧组件：
data.key==6？映射房屋：
data.key==9？代理详细信息：“”
}
)
//根据Dacre Denny使用开关的第二种方法
常量renderItem=（键）=>{
开关（钥匙）{
案例一：返还标的物财产；
案例2：退货价格大小；
案例4：退货天数；
案例5：返回侧组件；
案例6：返回住宅；
案例9：退货代理详情；
默认值：返回null；
}
}
首先，您没有从
渲染返回任何内容。还不清楚您的输出应该是什么。您想按键排序，还是只保留数组中对象的顺序？感谢您的响应，是的，只保留数组中对象的顺序。文本是否在值中（例如“SUBJECT PROPERTY OVERVIEW”）是指“HTML转到此处”部分吗？“HTML转到此处”部分是指我的网页的UI。它与值没有任何关系（例如“主题属性概述”）等等@ParvezSiddiqi你可能会发现这个库很有用，谢谢Denney，它为我做了一些小的修改，比如在开关块和SubjectProperty中默认应该，而不是等等。
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>

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

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>

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

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

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

   }