React Js中的水平时间线

Question

如何在水平时间轴中仅显示年份而不是整个数据

const EXAMPLE = [
  {
    data: 2018-03-23,
    status: "status",
    statusB: "Ready for Dev"
  },

Answer 1

如果只想将年份显示为标签，则需要将另一个道具传递给<HorizontalTimeline>组件。

<HorizontalTimeline
    styles={{
        background: "#f8f8f8",
        foreground: "#1A79AD",
        outline: "#dfdfdf"
    }}
    index={this.state.curIdx}
    indexClick={index => {
        const curIdx = this.state.curIdx;
        this.setState({ curIdx: index, prevIdx: curIdx });
    }}
    values={EXAMPLE.map(x => x.data)}
    // getLabel={(date, index) => (new Date(date)).toDateString().substring(4)}
    getLabel={date => date.slice(0, 4)}
/>

注释的getLabel道具是该库提供的默认属性，如果您想要其他行为，则需要自己提供一个自定义函数。