在 react-virtualized <List /> 添加 padding-top

Question

我有一个<List />组件，我想在其中padding-top向wrapper添加首字母。由于所有元素都已absolute定位，我找到了这个解决方案，但我想知道它是否正确或者是否有另一种更便宜的解决方案：

const rowRenderer = ({ index, key, style, isScrolling }) => {
// ...

return (
  <ul key={key}
    style={{
      ...style,
      top: style.top + 50,
    }}>
    { items.map(itemRenderer) }
  </ul>
)

}

相关的部分是style道具。

Answer 1

您可以通过将填充移动到 的级别来避免不必要的对象创建和传播操作List，例如：

<List
  {...props}
  style={{
    paddingTop: '50px',
    boxSizing: 'content-box',
  }}
  containerStyle={{
    position: 'relative',
    overflow: 'visible'
  }}
/>

在此处查看示例：https : //plnkr.co/edit/vNHDmpEY2bjQbCup4xsG?p=preview