Javascript 可重用组件时间轴
我正在构建一个时间轴组件,目前用于测量一天24小时。 我打算将其用作全球时间线,用于衡量24小时、7周或12个月 这是我的Javascript 可重用组件时间轴,javascript,reactjs,Javascript,Reactjs,我正在构建一个时间轴组件,目前用于测量一天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> ) }) retur
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上传递的值,如何更改悬停时每个项目符号的图例数据pop。
我该怎么做呢?我不会根据该值更改图例,因为它没有语义意义。有几个选项可能对你有用。一个是关于项目符号数量的道具,另一个是关于如何根据这些数字生成文本的道具。例如:
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}/>