可重用的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得到以下結果

我的疑問是如何根據我傳遞給函數的值（7、12或24）更改“數據彈出”（懸停時每個子彈的圖例）。 我怎樣才能做到這一點 ？

Answer 1

我不會根據值更改圖例，因為它沒有語義。 有幾個選項可能對您有用。 一種是為子彈的數量提供道具，另一種為如何從這些數字生成文本的道具。 例如：

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