React 根据 div id 在 div 内动态渲染组件

Question

我正在从头开始构建一个离散的条形图组件，以显示一天中每个小时的航班到达/离开。我需要将一些数据（航班和时间）基本上匹配到特定的 div 并将其呈现在 div 中。例如in image，我需要获取飞机列表，确定它是否用于Arrivals/destinations并将其与x轴时间范围匹配并在适当的div内渲染。我可以有唯一的 div id 查看示例

{
    "AirplaneData": {
      "Arrivals":[
        {"BIO": "0:00"}, 
        {"VGU": "2.00"}, 
        {"MEX": "4.00"}],
      "Departures": [
        {"BIO": "3:00"}, 
        {"VGU": "4.00"}, 
        {"MEX": "6.00"}]
      
    }
  }
  

  <div className={classes.bars}>
    <div className={classes.graph}>
      <div className={classes.bar} key="somekey">{DISPLAY SOME COMPONENT HERE}</div>
      <div className={classes.label1}><span style= {{marginLeft: "10px"}}>0.00</span></div>
      <div className={classes.bar}></div>
    </div>
    <div className={classes.graph}>
      <div className={classes.bar} key="someotherkey"><h1>{DISPLAY SOME COMPONENT HERE}</h1></div>
      <div className={classes.label2}><span style= {{marginLeft: "10px"}}>1.00</span></div>
      <div className={classes.bar}></div>
    </div>
</div>

.... repeat divs for every hour

如何在适当的 div 中渲染飞机时间数据（基本上将 div 键与飞机数据中的时间匹配。）

Answer 1

那么，如果您说您想从数据列表中动态呈现内容？我会研究map 和filter 函数。

通过您的示例，您可以使用您的数据数组返回一组 div。类似这个概念airplaneDataArray.map(data => return <div>...</div>);

映射数组中的“数据”几乎代表数组中的一个片段，因此您可以使用data.arrivals.key 调用数组的特定部分，依此类推。这将动态生成 div，而无需硬编码一堆 div 行。

现在，如果您只想获取特定时间的到达，您可以使用过滤器过滤掉与您想要的时间不匹配的到达。老实说，没有完全理解您的用例，所以一个更好的示例或更深入的内容会有所帮助。