在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 的相关文章

  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 是否可以在 React Native 中隐藏“BugReporting extraData”? (使用世博会)

    每次我使用 Expo 打开 React Native 应用程序时 我都会在控制台中收到大量消息 其中包含有关该应用程序的元数据 这实际上对我的调试没有多大帮助 特别是因为它每次都是相同的信息 并且每次应用程序重新加载时都会显示 即使是热重新
  • 在react中使用map方法渲染JSON API

    我对 JSON 对象 数组和映射方法的语法和结构有困难 我是 React 新手 正处于学习的初始阶段 这是我粘贴在下面的 JSON 文件代码 cloud Asia availability last15Min 100 last24Hour
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要
  • 如何将 Select2 与 Reactjs 一起使用?

    我有这样的依赖字段
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 在 ReactJS 中创建动态目录

    我有一个组件 它代表一个页面 其中有多个SectionHeader 组件作为该页面的子组件 我想通过检查 Page 的子项 SectionHeaders 来动态创建目录
  • 代码镜像错误:未捕获错误:扩展集中无法识别扩展值([对象对象])

    全部 我目前正在从事一个React Electron项目 该项目的目标是完成一个Markdown编辑器 当我配置codemirror 该程序报告错误说 Uncaught Error Unrecognized extension value
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

随机推荐

  • 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

    我有一个