Javascript React BaseTable rowSpan“；“闪烁”； 问题

如交互式BaseTable API游乐场中所示，当我开始滚动时，跨越行闪烁开/关

这是库中已知的一个bug，已经发布了许多与此相关的问题：

但是，似乎没有任何可用的修复方法。对此的评论指出，这是可以做到的，但我不确定代码中会将其放置在何处：

const overscan backward=
!isScrolling | |垂直滚动方向==‘向后’
? 数学最大值（1，已解决）
: 1;

这张桌子是什么样子的

代码 与操场上的代码相同：

    const data = [
    {
      key: 1,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 2,
      "column-0": "Row 1 - Col 0",
      "column-1": "Row 1 - Col 1",
      "column-2": "Row 1 - Col 1",
      "column-3": "Row 1 - Col 1",
      "column-4": "Row 1 - Col 1"
    },
    {
      key: 3,
      "column-0": "Row 2 - Col 0",
      "column-1": "Row 2 - Col 1",
      "column-2": "Row 2 - Col 1",
      "column-3": "Row 2 - Col 1",
      "column-4": "Row 2 - Col 1"
    },
    {
      key: 4,
      "column-0": "Row 3 - Col 0",
      "column-1": "Row 3 - Col 1",
      "column-2": "Row 3 - Col 1",
      "column-3": "Row 3 - Col 1",
      "column-4": "Row 3 - Col 1"
    },
    {
      key: 5,
      "column-0": "Row 4 - Col 0",
      "column-1": "Row 4 - Col 1",
      "column-2": "Row 4 - Col 1",
      "column-3": "Row 4 - Col 1",
      "column-4": "Row 4 - Col 1"
    },
    {
      key: 6,
      "column-0": "Row 5 - Col 0",
      "column-1": "Row 5 - Col 1",
      "column-2": "Row 5 - Col 1",
      "column-3": "Row 5 - Col 1",
      "column-4": "Row 5 - Col 1"
    },
    {
      key: 7,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 8,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 9,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 10,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 11,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 12,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 13,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 14,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 15,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    },
    {
      key: 16,
      "column-0": "Row 0 - Col 0",
      "column-1": "Row 0 - Col 1",
      "column-2": "Row 0 - Col 1",
      "column-3": "Row 0 - Col 1",
      "column-4": "Row 0 - Col 1"
    }
  ];

  const columns = [
    {
      dataKey: "column-0",
      key: "column-0",
      resizable: true,
      title: "Column 0",
      width: 150
    },
    {
      dataKey: "column-1",
      key: "column-1",
      resizable: true,
      title: "Column 1",
      width: 150
    },
    {
      dataKey: "column-2",
      key: "column-2",
      resizable: true,
      title: "Column 2",
      width: 150
    },
    {
      dataKey: "column-3",
      key: "column-3",
      resizable: true,
      title: "Column 3",
      width: 150
    },
    {
      dataKey: "column-4",
      key: "column-4",
      resizable: true,
      title: "Column 4",
      width: 150
    }
  ];

const rowSpanIndex = 0

const rowSpanArr = [5,2,3,2,5];
  columns[rowSpanIndex].rowSpan = ({ rowData, rowIndex }) => {
  console.log(rowIndex)
        
    let acc = 0
    for (let [index, x] of rowSpanArr.entries()){
      if (acc === rowIndex){
        acc = acc + x
        console.log("rowIndex:", rowIndex)
        console.log("rowSpanArr[index]:", rowSpanArr[index])
        return rowSpanArr[index]
      } 
      console.log(acc)
      acc = acc + x
    }
    
 };

const rowRenderer = ({ rowData, rowIndex, cells, columns }) => {
  const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
  if (rowSpan > 1) {
    const cell = cells[rowSpanIndex]
    const style = {
      ...cell.props.style,
      backgroundColor:"powderblue",
      height: rowSpan * 50 - 1,
      alignSelf: 'flex-start',
      zIndex: 1,
    }
    cells[rowSpanIndex] = React.cloneElement(cell, { style })
  }
  return cells
}

export default () => (
  <Table
    fixed
    columns={columns}
    data={data}
    rowRenderer={rowRenderer}
    overscanRowCount={2}
  />
)

const数据=[
{
重点:1,，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
重点:二,，
“第0列”：“第1行-第0列”，
“第1列”：“第1行-第1列”，
“第2列”：“第1行-第1列”，
“第3列”：“第1行-第1列”，
“第4列”：“第1行-第1列”
},
{
重点:三,，
“第0列”：“第2行-第0列”，
“第1列”：“第2行-第1列”，
“第2列”：“第2行-第1列”，
“第3列”：“第2行-第1列”，
“第4列”：“第2行-第1列”
},
{
重点:四,，
“第0列”：“第3行-第0列”，
“第1列”：“第3行-第1列”，
“第2列”：“第3行-第1列”，
“第3列”：“第3行-第1列”，
“第4列”：“第3行-第1列”
},
{
重点:五,，
“第0列”：“第4行-第0列”，
“第1列”：“第4行-第1列”，
“第2列”：“第4行-第1列”，
“第3列”：“第4行-第1列”，
“第4列”：“第4行-第1列”
},
{
重点:6,，
“第0列”：“第5行-第0列”，
“第1列”：“第5行-第1列”，
“第2列”：“第5行-第1列”，
“第3列”：“第5行-第1列”，
“第4列”：“第5行-第1列”
},
{
关键：7，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键词：8，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键词：9，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键词：10，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键词：11，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键词：12，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键字：13，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键字：14，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键词：15，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
},
{
关键字：16，
“第0列”：“第0行-第0列”，
“第1列”：“第0行-第1列”，
“第2列”：“第0行-第1列”，
“第3列”：“第0行-第1列”，
“第4列”：“第0行-第1列”
}
];
常量列=[
{
数据键：“列-0”，
键：“列-0”，
可调整大小：正确，
标题：“第0列”，
宽度：150
},
{
数据键：“第1列”，
键：“第1列”，
可调整大小：正确，
标题：“第1栏”，
宽度：150
},
{
数据键：“第2列”，
键：“第2列”，
可调整大小：正确，
标题：“第2栏”，
宽度：150
},
{
数据键：“第3列”，
键：“第3列”，
可调整大小：正确，
标题：“第3栏”，
宽度：150
},
{
数据键：“第4列”，
键：“第4列”，
可调整大小：正确，
标题：“第4栏”，
宽度：150
}
];
常数rowSpanIndex=0
常量rowSpanArr=[5,2,3,2,5]；
列[rowSpanIndex]。rowSpan=（{rowData，rowIndex}）=>{
console.log（行索引）
设acc=0
for（让[index，x]为行spanarr.entries（））{
如果（acc==行索引）{
acc=acc+x
log（“rowIndex:，rowIndex”）
log（“rowSpanArr[index]：”，rowSpanArr[index]）
返回行spanarr[索引]
} 
控制台日志（acc）
acc=acc+x
}
};
const rowRenderer=（{rowData，rowIndex，cells，columns}）=>{
const rowSpan=列[rowSpanIndex]。rowSpan（{rowData，rowIndex}）
如果（行跨度>1）{
常量单元格=单元格[rowSpanIndex]
常量样式={
…细胞，道具，风格，
背景颜色：“粉蓝色”，
高度：行间距*50-1，
alignSelf:“灵活启动”，
zIndex:1，
}
单元格[rowSpanIndex]=React.cloneElement（单元格，{style}）
}
返回单元
}
导出默认值（）=>(
)

---

有人知道临时修复会是什么样子吗？我真的需要此功能。

已找到解决方案！下面的代码用于一个更复杂的示例，但我认为可以使用该过程

columns[rowSpanIndex].rowSpan = ({ rowIndex }) => {
    let acc = 0;
    for (let [index, x] of rowSpanArr.entries()) {
      if (acc === rowIndex) {
        acc = acc + x;

        return rowSpanArr[index];
      }

      acc = acc + x;
    }
  };

与CSS一起

.BaseTable__row-cell{
  align-items: flex-start;
  }

---

你好GitHub上的评论提到了这一点：但是似乎已经修复了，你有这个包的最新版本吗？顺便说一句，这条评论是指depen中的一个bug

.BaseTable__row-cell{
  align-items: flex-start;
  }