时间戳

首页 > 解决方案 > React 根据 div id 在 div 中动态渲染组件

reactjs - React 根据 div id 在 div 中动态渲染组件

问题描述

我正在从头开始构建一个离散的条形图组件，以显示一天中每个小时的航班到达/离开。我需要将一些数据（航班和时间）基本上匹配到特定的 div 并将其呈现在 div 中。例如在 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 键与飞机数据中的时间匹配。）

标签： reactjsreact-componentreact-chartjsreact-vis

解决方案

因此，如果您说要从数据列表中动态呈现内容？我会研究mapandfilter函数。

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

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

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

推荐阅读