reactjs - 将几行合并为一行

Question

我有一个带有标记的媒体播放器。目前，标记看起来像这样

以下是一些有用的代码部分：

return data.map((item, i) => {
      // console.log('item: ',item);
      let display = 'block';

      let left = null;
      let position = (item.position / 1000) * ratio;
      // console.log(position);
      // check if low duration or position of point is bigger than duration of media
      if (duration >= 1) {
        if (position <= 100) {
          left = position  + '%';
        } else {
          // if outside if bar then hide element
          display = 'none';
        }
      } else {
        display = 'none';
      }



let styleLine = {
        display: display,
        // position: 'absolute',
        width: left,
        height: '3px',
        paddingLeft: left,
        backgroundColor: item.lineColor,
      }
      //create style for point
      let stylePoint = {
        height: '9px',
        width: '9px',
        backgroundColor: item.color,
        display: display,
        position: 'absolute',
        cursor: 'pointer',
        borderRadius: '25px',
        marginTop: '-2px',
        marginLeft: '-2px',
        //zIndex: '15',
        left: left,
      };

      return (
        // <span key={i} style={stylePoint} onClick={this.handleClick}></span>
        <span key={i} >
          <span style={styleLine}></span>
          <span style={stylePoint} onClick={this.handleClick}></span>
        </span>
      )
    })
  };

我需要的是一条彩色线，它从第一种颜色开始直到红点，然后是第二种颜色，而不是两条具有相同开头的单独线。我尝试过使用 z-index ，但没有奏效。什么是正确的解决方案？

标签： reactjs

Answer 1

不能为每种颜色创建不同的线条并将它们的位置设置为绝对位置吗？因此，当一个完成时，您使用 css left 属性从该点开始另一个。