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

Question

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

{
    "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 函数。

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

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

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

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

React Dynamically render component within div based on div id

reactjs

react-chartjs

react-vis

react-component