javascript - 可重用的 react 组件时间线

Question

我正在构建一个时间线组件，目前用于测量一天(24 小时)。 我打算将其用作“全局”时间线，用于衡量 24 小时、7 周或 12 个月。

这是我所拥有的

bullets(number) {
  const points = [...Array(number)].map((_, i) => {
    return (
      <li key={i} data-pop={i < 13 ? i + ' AM' : i-12 + " PM"}></li>
    )
  })
  return points;
}

render() {
  return (
    <Time>
      <ul>
        {this.bullets(24)}
      </ul>
    </Time>
  )
}

我的函数中得到了以下结果，传递了 24 或 7

我的疑问是如何更改“data-pop”(这是悬停时每个项目符号的图例)，具体取决于我在函数上传递的值(7、12 或 24)。 我怎样才能做到这一点？

Answer 1

我不会根据值更改图例，因为它没有语义意义。有几个选项可能适合您。一种是提供子弹数量的 Prop ，另一种是如何从这些数字生成文本。例如:

const TimeLine = ({ totalBullets, legendFunc }) => (
  <Time>
    <ul>
      {[...Array(number)].map((_, i) => (
        <li key={i} data-pop={legendFunc(i)}></li>
      ))}
    </ul>
  </Time>
)

// use like this
<TimeLine 
  totalBullets={24} 
  legendFunc={i => (i < 13) 
    ? i + ' AM' 
    : i-12 + ' PM'
  }
/>

更好的方法是让您的组件完全由数据驱动。在您的情况下，这可能只是一个文本表示数组，但作为一个对象数组可能是有意义的，这样您就可以在需要时拥有不同的键。例如，首先定义要显示的数据:

// generate your bullet data somewhere
const data = [...Array(number)].map((_, i) => ({
  legend: i < 13 ? i + ' AM' : i-12 + ' PM'
}))

const TimeLine = ({ bulletData }) => (
  <Time>
    <ul>
      {bulletData.map((bullet, i) => (
         <li key={i} data-pop={bullet.legend}></li>
      ))}
    </ul>
  </Time>
)

// use like
<TimeLine bulletData={data}/>