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

Question

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

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

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

}

相关部分是 style prop.

Answer 1

您可以通过将填充移动到 List 的级别来避免不必要的 object-creation 和扩展操作，例如：

<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

Add padding-top in react-virtualized <List />

css

reactjs

react-virtualized