横向时间轴

1. mock数据

const list = [{
  id: 11, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
}, {
  id: 2, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
}, {
  id: 3, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
}, {
  id: 8, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
}, {
  id: 5, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
}, {
  id: 6, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
}, {
  id: 7, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
}, {
  id: 29, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
}, {
  id: 30, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
}, {
  id: 81, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
}, {
  id: 52, title: '中国17岁选手苏翊鸣，凭借第2轮88.70分的成绩，获得该项目银牌', content: '北京时间2月7日，北京2022年冬奥会短道速滑男子1000米决赛在首都体育馆展开，中国选手任子威以1:26.768的成绩获得金牌，中国选手李文龙以1:29.917的成绩获得银牌。开赛前，中国三位选手碰了碰胳膊，互相鼓劲。发令枪响起，武大靖排在第一。第二圈时，刘少昂滑到第一位。中国三位选手在中间，武大靖在第三圈时开始领滑。但随后因为冰面上有刀片，比赛因为安全原因暂停。冰面经过修整后，比赛重新开赛。大', eventDate: '2022-02-07 22:39:19',
}, {
  id: 83, title: '春雨、范可新、张雨婷、武大靖、任子威组成的中国队以2:37.348的成绩获得金牌。', content: '在2000米混合团体接力首轮即1/4决赛中，中国队力压强敌，以小组第一晋级半决赛。半决赛上演惊心动魄一幕，因为俄罗斯奥委会队多名运动员上跑道和美国队阻挡犯规，两队被取消比赛成绩。中国队晋级决赛。中国队决赛的对手为加拿大、意大利和匈牙利队。决赛，中国队派出范可新，曲春雨、任子威和武大靖组成的主力阵容。第一次出发，弯道处就有选手摔倒，比赛不得不重新开始。第二枪顺利出发后，范可新抢到第三，意大利和加拿大', eventDate: '2022-02-05 17:34:50',
}]

2. 实现js

/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react'
import { Tooltip } from 'antd'

const EventTimeLine = ({ list, onChange, currentEvent }) => (
  

    {list.map(item => (
      <div
        className={currentEvent === item.id ? 'selected-event' : 'event'}
        key={item.id}
        // onClick={() => {
        //   setCurrentEvent(item.id)
        // }}
        onClick={() => onChange(item.id)}
      >
        

          <div
            className="event-title"
            style={{
              overflow: 'hidden',
              display: '-webkit-box',
              '-webkit-box-orient': 'vertical',
              'text-overflow': 'ellipsis',
            }}
            title={item.title}
          >
            <Tooltip
              title={(
                

                  
{item.title}
                  
{item.content}
                
              )}
              color="#fff"
              overlayInnerStyle={{ color: '#000' }}
            >
              {item.title}
            
          
        
        

          

            {currentEvent === item.id ? 
 : null}
          
        
        

          {item.eventDate}
        
      
    ))}