Css 在react virtualized中添加padding top<；列表/>；

我有一个

组件，我想在其中向包装器添加一个初始的

padding top

。由于所有元素都是绝对定位的，我找到了这个解决方案，但我想知道它是否正确，或者是否有其他更便宜的解决方案：

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

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

constrowrenderer=（{index，key，style，isScrolling}）=>{
// ...
返回(

{items.map（itemRenderer）}

)

}

---

相关部分是

样式

道具。

通过将填充移动到

列表

的级别，可以避免不必要的对象创建和排列操作，例如：

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

---

这里有一个例子：

你说的便宜是什么意思？为什么所有元素都有

absolute

定位？@Pineda

absolute

定位元素是渲染项目时

react virtualized

的核心行为。看一看这里，我的意思是如果有一种API方法或什么东西可以避免传播计算的

风格

，并用我想要的

50px

填充重新计算感谢@brianvaughn的回复（以及非常棒的

反应虚拟化

肯定），并对延迟表示歉意。我以前尝试过这个解决方案，但没有成功。我是为了举例说明而创作的。查看每个项目悬停时显示的

框阴影

，以及如何切割第一行的顶面。请查看我在哪里应用初始问题中暴露的解决方案。这里有一个微妙的区别，当

时查看第一行：悬停

一个项目可能更像这样？是的！谢谢@brianvaughn，就这样

containerStyle

ftwI我再次看到了，并意识到表中没有这个

prop

，但它在

网格中。查看
列表
我知道它继承了这个（和其他）道具。也许会有一些有用的建议/提示，可以做一个公关以防万一。再次感谢你所做的伟大工作