Question

我有一个<List />组件，我想在包装器中添加一个初始padding-top。由于所有元素都位于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

在react-virtualized <list>中添加padding-top

1 个答案: