在react-virtualized 中添加padding-top

2024-03-30

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

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

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

}

相关部分是style prop.


您可以通过将填充移动到对象的级别来避免不必要的对象创建和展开操作。List, eg:

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

请参阅此处的示例:https://plnkr.co/edit/vNHDmpEY2bjQbCup4xsG?p=preview https://plnkr.co/edit/vNHDmpEY2bjQbCup4xsG?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在react-virtualized 中添加padding-top 的相关文章

  • TDD/测试 CSS 和 HTML? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha
  • 如何将大于整个页面 100% 的元素居中对齐?

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 使用 React.forwardRef 与自定义 ref prop 的价值

    我看到React forwardRef从反应文档来看 似乎是将引用传递给子功能组件的认可方式 const FancyButton React forwardRef props ref gt
  • 如何使用draft.js更改光标位置?

    我想知道在键盘命令上完成文本插入后如何更改 Draft js 中的光标位置 因此我目前正在使用 handleKeyCommand cmd 每当用户按下特定按钮时插入自定义文本块 接下来我尝试了以下操作 currentState this s
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 使用deployJava.runApplet来定位特定元素

    经过多年成功维护一个使用旧有的小程序 嵌入Java小程序的方法 我们无法捂住耳朵唱 啦啦啦 不再了 是时候使用 deployJava runApplet 当我使用点击处理程序触发此方法时 此处通过 jQuery 在按钮上使用事件侦听器 但这
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 使用 Flask/WTForms 和 React 进行 CSRF 保护

    有没有人成功地为使用 React 作为受控组件 提交到 Flask 后端 最好使用 WTForms 的表单实现了 CSRF 保护 我看过很多部分答案 其中一个是关于 Django 的 但找不到任何关于 Flask 的明确答案 我的大问题似乎
  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type

随机推荐

  • Client = Discord.client() TypeError: 'module' 对象不可调用

    为什么我会得到TypeError module object is not callable用我的代码 import discord from discord ext commands import Bot from discord ext
  • Google Cloud Endpoints:verifyToken:签名长度不正确

    今天早上 从我的 Android 应用程序向我的 Google Cloud Endpoint 发出的每个 API 请求都开始出现以下异常 com google api server spi auth GoogleIdTokenUtils v
  • 测量任务之间的响应时间

    我正在编写一个程序 用Python 它返回一些数据 我想知道如何测量请求和答案之间的响应时间 用于性能分析 然后我会将其存储在某个地方 有一种更好更有效的方法来做到这一点 或者只是插入例如time ctime 在请求和另一个请求之前time
  • 使用 TPL 时如何管理线程本地存储 (TLS)?

    我想将日志记录上下文信息存储在 TLS 中 以便可以在入口点设置一个值 并使该值在所有结果堆栈中可用 这工作得很好 但我还使用了 TPL 和 ThreadPool 那么问题就变成了如何将 TLS 数据迁移到其他线程 我可以自己完成这一切 但
  • 如何为具有大图像目录的博客设置 Jekyll,以避免在生成的站点中重复该目录?

    我正在考虑使用 Jekyll 构建一个网站 该网站将成为一个包含大量图像 以及其他大型媒体文件 的博客 创建图像目录 然后根据帖子中的需要链接到它们是很容易的 但是 据我了解 生成站点时 所有图像数据将被复制到保存静态文件的生成的 site
  • 如何在 IntelliJ IDEA 中搜索特定代码块?

    我如何搜索withinIntelliJ IDEA 中的特定代码块或选择 I got used to using this feature in Eclipse In Eclipse you can just double click on
  • 为什么 ViewModelProvider 在屏幕旋转时创建视图模型的新实例?

    我试图实现分页 但每次旋转视图模型的屏幕构造函数都会被调用 从而触发 loadInitial 从我的 DataSource 类中的网络获取新数据 感谢帮助 ViewModel def lifecycle version 2 2 0 impl
  • 有关新 Windows 10 错误的信息:ERROR_CLOUD_FILE_ACCESS_DENIED

    打开文件进行读取时遇到新的 Windows 10 错误代码CreateFile 我们得到错误395 但关于其含义或如何解决的信息很少 Windows 10 SDK的错误详细信息如下 错误编号395 误差常数ERROR CLOUD FILE
  • 获取中位数对应的索引

    我有一个带有一列的 pandas 数据框 我想知道中位数的索引 也就是说 我这样确定中位数 df 中位数 这给了我中值 但我想知道该行的索引 这个可以确定吗 对于长度不均匀的列表 我可以搜索具有该值的索引 但对于均匀的列表长度 这是行不通的
  • JSR303 自定义验证器被调用两次

    我正在使用 Spring MVC 创建一个网站 为了持久性 我使用 Spring Data JPA 和 Hibernate 4 作为我的 JPA 提供程序 目前正在使用 Hibernate Validator 处理验证 我遇到一个问题 我的
  • Javascript 嵌套函数失去作用域

    有人可以解释一下以下代码的范围绑定吗 window name window object name object method function nestedMethod function console log this name nes
  • 无法在 GitHub 上呈现标头

    这是我的README md在 GitHub 存储库中 This is a Header This is not a Header 这两行都呈现为纯文本 第一个应该呈现为标题 我记得它之前是这样的 我不知道我的浏览器 macOS 上的 Chr
  • 用 Java 实现最佳匹配搜索

    我正在尝试使用现有的 Java 数据结构获得最佳匹配字符串匹配 虽然速度很慢 但任何提高其性能的建议都将受到欢迎 样本数据看起来像这样 Key V 0060175559138 VIP 006017555 National 006017 Lo
  • 模板引用变量在 ng-template 内返回未定义

    已经尝试过this https stackoverflow com questions 45677905 angular4 component reference inside ng template and this https stac
  • 如何在 Windows 8 中以编程方式检查/切换飞行模式?

    我必须检查 Windows 8 中是否启用了飞行模式 并且可能需要切换其状态 我目前正在开发 C NET 4 0 Windows 窗体应用程序 但此问题的答案不应受此限制 不幸的是 Metro 应用程序没有一种编程方式来更改 Windows
  • 使用 API 创建 Amazon EC2 实例

    com amazonaws services ec2 是否包含从现有 AMI 创建全新 EC2 实例的方法 我希望通过 Java SDK 而不是 Web 管理控制台来执行此操作 以下是使用 Amazon AWS SDK for Java 创
  • Spring STS 不适用于 Gradle

    我已经下载了Spring STS 我创建了一个项目 新的 spring 启动项目 并选择了 gradle buildship 它说我没有 需要从市场上购买 我去了市场 得到了它 重新启动 创建了一个示例 gradle java 项目并编译它
  • MultipartEntityBuilder 从 Android httpurlconnection 发送数据

    我正在尝试更改 HTTPClient 已弃用的代码 但我在 setEntity 上收到错误 因为它已损坏 而且我不知道如何通过新的 httpConnectionUrl 来 paas MultipartEntityBuilder 我旧的已弃用
  • Postgres 使用数组格式化字符串

    我正在寻找一种使用数组格式化字符串的简单方法 如下所示 select format using array Hello s and s ARRAY Jane Joe format using array Hello Jane and Joe
  • 在react-virtualized 中添加padding-top

    我有一个