在React Virtualized中使用语义UI React
React Virtualized是一个用于优化大型列表和表格的React组件库。它通过只渲染可见区域内的元素来提高性能，并提供了一些额外的功能，如滚动加载和自定义行高。
语义UI React是一个基于React的UI组件库，它提供了一套可重用的UI组件，帮助开发者构建现代化的Web应用程序。它遵循语义化的HTML标准，并提供了丰富的样式和交互效果。
在React Virtualized中使用语义UI React，可以通过以下步骤进行：
- 安装React Virtualized和语义UI React：npm install react-virtualized semantic-ui-react
- 导入所需的组件：import { List } from 'react-virtualized'; import { Card } from 'semantic-ui-react';
- 创建一个自定义的行渲染器函数：const rowRenderer = ({ index, key, style }) => ( <Card key={key} style={style}> {/* 在这里渲染语义UI React的组件 */} </Card> );
- 在组件中使用React Virtualized的List组件，并传入必要的props：const MyList = () => ( <List width={300} height={500} rowCount={data.length} rowHeight={100} rowRenderer={rowRenderer} /> );
通过以上步骤，你可以在React Virtualized中使用语义UI React来渲染列表中的每一行。你可以根据需要自定义行的内容和样式，以满足具体的应用场景。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
我像前面提到的那样安装了react-select-virtualized ，如下所示
tan@MXL9492NNH MINGW64 /c/tan/projectlens/testing related folders/for_npm_react_virtualized_testing/projectexplorer (develop)
$ npm install --save react-select-virtualized
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
浏览 2提问于2021-03-12得票数 0
我一直很难让React Virtualized在语义UI上正常工作。
根据下面的示例，通过将className属性设置为“item”，我可以将正确的样式应用于列表中的项目。
然而，我一直遇到的问题是从语义的即席组件(如List )传递到List.Item的属性。道具，如分割和选择。还有没有其他人遇到过这个问题，有没有解决方案？
浏览 12提问于2018-01-03得票数 3
3回答
我想在安装一个模块时安装特定版本的依赖项。
假设我想安装react-virtualized-select模块。它依赖于react-virtualized模块。因此，当我运行'npm install react-virtualized-select‘时，它会安装'react-virtualized’模块的最新版本(9.11.0)。但我想安装特定版本(9.9.0)的“react-virtualized”模块。
我试着在下面的package.json中这样做
"peerDependencies": {
"react-virtualized-select
浏览 3提问于2017-10-17得票数 0
我计划在我的项目中实现react-virtualized，因为当前的解决方案不能处理动态高度。
在我的例子中，列表有不同的项目高度(高度取决于内容)。此外，这些项目可以根据需要进行扩展和减去。react-virtualized可以用流畅的动画处理这种功能吗？
浏览 4提问于2018-02-16得票数 0
回答已采纳
我使用的是material-ui的List和ListItem组件。具体地说，我使用的是嵌套项功能。查看大约在页面的一半处，您将看到嵌套列表。重点是: material-ui负责“嵌套”问题，如缩进和扩展/收缩箭头。
一旦我添加了许多项，我意识到列表非常慢。所以我偶然发现了来自react-virtualized的AutoSizer。问题是:在react-virtualized中，我的代码需要为每一行提供一个rowRenderer函数。我不想失去内置的material-ui功能，它可以计算出嵌套项的缩进。然而，使用AutoSizer时，我的代码似乎需要进行自定义工作才能弄清楚缩进。另外，我的代码将
浏览 0提问于2016-12-14得票数 15
我在用：
typescript 2.1.6 (虽然我也可以用2.4.0再现这个错误)
react 15.6.1
react-virtualized 9.9.0
@types/react-virtualized 9.7.3
TS正在抱怨以下代码(示例)：
import * as React from "react";
import { List, ListRowProps } from "react-virtualized";
class TestComponent extends React.PureComponent<{}, {
浏览 3提问于2017-08-30得票数 1
回答已采纳
1回答
像react-virtualized、react-window和react-virtuoso这样的库具有item count属性，类似于materal-ui下面的代码。但是，它位于return中。有什么方法可以使item counter更新吗？
export default function VirtualizedList() {
const classes = useStyles();
return (
<div className={classes.root}>
<FixedSizeList height={400} width={300}
浏览 1提问于2020-05-21得票数 1
回答已采纳
我已经安装了版本15.2.1的react、react-addons-shallow-compare和react-dom。当我尝试使用react-virtualized时，我在Chrome控制台上得到一个错误消息
external "React.addons.shallowCompare":1Uncaught ReferenceError: React is not defined
在没有使用react-virtualized的情况下，React运行良好。不确定为什么会出现此错误。
浏览 6提问于2016-07-22得票数 0
我正在尝试为网格组件(使用react-virtualized)集成一个自定义滚动条(使用react- custom scrollbar：)。
我试图遵循这个github问题()的指示，但一直没有运气。
任何关于同时使用这两个库的见解都将不胜感激！
更新:在搜索react-virtualized的gitter room后，我遵循了一个建议，使用perfect-scrollbar包(而不是react-custom-scrollbar)和react-virtualized一起使用。到目前为止，它们工作得很好。
浏览 1提问于2016-12-14得票数 2
我正在尝试使用react虚拟化来虚拟化一个列表，其中一些行具有不同的高度，并且列表占据了父目录中的所有空间。我正试图用CellMeasurer、AutoSizer和List组件来实现这一点。
我的包版本如下：
react: "16.8.6"
react-dom: "16.8.6"
react-virtualized: "^9.21.1"
import React, { PureComponent } from 'react';
import 'react-virtualized/styles.css';
impor
浏览 1提问于2019-08-16得票数 5
回答已采纳
在react语义ui中创建带有链接的菜单。我想知道react的安装情况。从上周开始我就坚持这样做了。
有人能给我提个建议吗?我怎么才能做到这一点。等待任何人的回复。提前谢谢。
浏览 2提问于2017-08-23得票数 0
我试图使用跨度标签在下拉列表中显示项目编号，但它抛出了一个error.Here，这是导致错误的代码。我的沙箱链接是here import React from "react";
import ReactDOM from "react-dom";
import { Select } from "react-select-virtualized";
import faker from "faker";
import "./styles.css";
const optionsDefault = new Array(1
浏览 15提问于2021-03-31得票数 0
我试图将包react-virtualized排除在NPM 7的对等依赖检查之外。
npm install react-virtualized --legacy-peer-deps
...but，我的目标是安装所有带有npm的软件包，这个包不应该被检查是否存在对等依赖关系。这有可能吗？
我会接受任何向我展示如何操作package.json的答案，这样一个新的npm安装就可以运行，而不会出现对等依赖错误。我有以下package.json：
{
"name": "test",
"version": "1.0.0",
"
浏览 9提问于2021-08-19得票数 3
回答已采纳
我使用react-virtualized来呈现一个表。该表应如下所示：
期望表
到目前为止，我已经到达这里：
当前表
我能够使用自定义的checkbox函数在标题行中添加headerRenderer。
我想在每行的开头添加复选框。我怎么能这么做？
下面是我编写的代码：
import React, {useState} from 'react';
import {Checkbox, Segment} from 'semantic-ui-react';
import {Column, Table, AutoSizer, SortDirection
浏览 4提问于2020-04-17得票数 1
回答已采纳
我想通过cdnjs和SystemJS在web应用程序中使用react虚拟化。
从我见过的所有例子来看，react虚拟化和react库似乎都是在本地加载的，然后与Webpack捆绑在一起，然后才被包含在网页中。现在，我想通过不带Webpack的cdnjs使用它，只需通过SystemJS导入它。但是当我尝试的时候，我遇到了错误，说它找不到反应。
我想知道以前是否有人尝试过这一点，以及反应虚拟化是否支持这一点。谢谢。
更新:为了清晰起见，我已经包含了一些代码来展示我想要做的事情。
index.html
...
<head>
<script src="https://cd
浏览 8提问于2016-11-21得票数 1
1回答
我有一个组件，它使用react-virtualized的List进行虚拟化滚动，其中每一行要么是一个类别标题，要么是属于该类别的实际内容。
Fruits
- Strawberry
- Blueberry
- Mango
- ...etc
Grains
- Oats
- Wheat
- Rice
- ...etc
(其中Fruits和Grains是类别标头)
当用户滚动时，如果他们滚动到类别标题，我希望能够从该行获取数据，并将其呈现在一个“粘性”(在引号中，因为position: sticky还不是一个可行的选项)容器中，停留在滚动容器的顶部，直到滚动到下一个类别标题，依此类推。(基本上，在iO
浏览 0提问于2016-10-24得票数 3
我正在尝试实现react-virtualized，所以我进入了官方文档，并在我的代码中完成了它，下面是我的代码：
import React from "react";
import { List } from "react-virtualized";
class Users extends React.Component {
state = {
userList: ["1", "222", "33"]
};
rowRenderer({ key, index, isScrolling, isV
浏览 2提问于2019-12-12得票数 1
回答已采纳
我希望在组件中有选择地使用semantic-ui-css类。问题是，我使用PostCSS模块选项，它在本地对特定组件的所有类名进行范围设置。当我使用semantic-ui-react组件(例如按钮)时，它使用类ui button呈现元素button，但是所包含的css在本地得到作用域，因此，而不是button，我得到了button-min_ui__14RRq。
我需要做两件事之一：
导入语义-ui css，而不对类进行本地范围限定。
使语义-ui组件使用本地范围的类。
就目前而言，我看到我只有一个选择：
import React from 'react';
im
浏览 1提问于2018-09-06得票数 0
1回答
我正在尝试在我的React组件中包含带有ES6导入的语义UI。
我正在使用带有Babel + Browserify的Grunt。
我已经通过NPM安装了语义UI。
下面是Gruntfile browserify配置：
grunt.initConfig({
browserify: {
dist: {
options: {
transform: [
['babelify', {
presets: ['es2015', 'react']
浏览 2提问于2016-06-24得票数 0
我需要创建一个带有外部滚动条的虚拟化表，类似于Discourse.org在其上所做的事情
React-Virtualized有一个，用于管理滚动列表的窗口滚动。
我如何做一些类似的事情，但是在自定义元素中有滚动？
我也对任何解决方案持开放态度，即使它们不是基于React-Virtualized和React-Window。
浏览 3提问于2018-07-12得票数 2
如果我可以使用React Virtualized的Collection组件来解决我的问题，我有点困惑。我会试着描述一下我正在做的事情：
我在页面上使用React Virtualized来显示两个项目列表/集合。我已经完成了第一个集合，其中包含具有相同宽度和高度的项：
第一个集合非常简单，易于实现。现在我正在处理第二个集合，其中包含不同大小的图像。我希望单元格具有相同的高度但不同的宽度(当然取决于图像尺寸)。问题是行可能并不总是具有相同数量的单元格：
这可以通过React Virtualized实现吗？如果是这样，我如何确定"cellSizeAndPositionGe
浏览 4提问于2017-01-12得票数 0
在通读文档之后，我不确定react-virtualized是否支持这个用例。
假设我有一些按日期分组的数据。
[
{
date: 'Monday',
data: {
item1: "item1",
item2: "item2",
item3: "item3",
// and more ..
}
},
{
date: "Tuesday",
data: {
item1: "item1",
浏览 0提问于2017-07-22得票数 2
2回答
React语义UI
、、、、
我在使用React ()的语义Ui来样式化React组件时遇到了一个问题。我知道我可以修改语义UI的样式核心，我做到了，但是有时我想把我自己的样式放到他们的组件中。
我真的很想在定义类名时使用BEM方法CSS命名约定。
举个简单的例子，我有一个<Menu />组件，我想改变它的背景，所以我将添加一个<Menu className="menu-header">类，.menu-header类有不同的背景颜色属性。
重点是，我不能在没有!important的情况下修改它，因为语义UI具有更高的优先级(它们获取更具体的元素，只有很少的类，而不是像我想要的那样)。
浏览 2提问于2016-12-29得票数 0
我是一个新的反应，我有一个关于语义UI的问题。
下面是一个教程，其中我必须在App.js中使用语义UI的头组件，包括
import { Header } from 'semantic-ui-css'
但是，每当页面使用此代码进行编译时，它都会返回如下错误消息：
ReferenceError: jQuery is not defined
./node_modules/semantic-ui-css/semantic.js
node_modules/semantic-ui-css/semantic.js:497
494 | });
495 |
49
浏览 0提问于2020-03-12得票数 6
2回答
我已经通过npm安装了语义ui。它目前在node_modules中，并内置到/dist/中。看起来是这样的：
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react":
浏览 1提问于2016-07-30得票数 1
回答已采纳
1回答
react中的可搜索下拉列表
、、、、
我有可供选择的下拉列表。为此，我使用了VirtualizedSelect，问题是onChange无法工作。
import VirtualizedSelect from 'react-virtualized-select'
import "react-virtualized-select/styles.css";
import 'react-virtualized/styles.css'
<VirtualizedSelect
id="sponsor"
name="sponsor"
浏览 2提问于2022-03-10得票数 3
回答已采纳
我正在尝试包含一个额外的列，用于显示react-virtualized表的序列号。让我们举一个简单的表格例子。另外，在对此表进行排序的情况下，序列号不应重新排序。有什么想法吗？ PS:序列号列不是从中派生列的数据的一部分，因此无法通过rowGetter获取。它必须是不使用“datakey”的单独的断开连接的列。 import React from 'react';
import ReactDOM from 'react-dom';
import { Column, Table } from 'react-virtualized';
import
浏览 16提问于2019-02-08得票数 0
回答已采纳
我有一个启用了列排序的react-virtualized表。我的计划是在列标题旁边添加一个filter icon，并在有人点击它时执行一个。
下面是我所做的:我启用了headerRenderer
headerRenderer= {this.renderHeader}
我的headerRenderer返回一个组件
renderHeader = (value) => {
// console.log(value)
return <ColumnFilterContainer label= {value.label} />
}
ColumnFilterCont
浏览 2提问于2016-11-04得票数 0
我正在写一长串的东西。为此，我使用了react-virtualized (https://github.com/bvaughn/react-virtualized)。但是我面临着下面的问题。 ? 当我试着滚动到底部2秒，它是空白的，然后数据正在加载。它不是很平滑。此https://2v9j5.csb.app/是CodeSandBox链接。
浏览 64提问于2020-08-14得票数 2
回答已采纳
我正在使用react-virtualized来呈现我的表。有没有可能用自定义的列组件替换默认的列组件？我一直收到这个错误Failed prop type: Table only accepts children of type Column
浏览 0提问于2019-02-23得票数 1
使用browserify (commonjs)，如何最小化react-virtualized的大小？它似乎包含了其他我没有使用的类，比如Collection和Table。我已经尝试使用标准语法import {foo, bar}...以及分别指定每个类的import {WindowScroller} from 'react-virtualized/dist/commonjs/WindowScroller'。然而，房车似乎仍在占用约90k：
谢谢!
浏览 0提问于2016-10-14得票数 0
我正在尝试使用与相结合
get虚拟化- select对我来说效果很好，但是不知怎么的，我无法在遵循Git指南中的所有步骤之后得到react选择-快速过滤-选项，输入一些值来选择输入之后，我就没有结果了。
我已经为这个问题在代码沙箱中创建了代码，如果是而不是，但是当您将labelKey更改为label(默认值)时，它会再次工作。
以下是完整的代码：
import React from 'react';
import { render } from 'react-dom';
import Select from 'react-virtualized-sel
浏览 1提问于2017-10-24得票数 2
回答已采纳
1回答
大家好，谢谢你们抽出时间。
我试着用Semantic-ui-，这里有一个简单的例子.
import React from 'react'
import {Segment, Header} from "semantic-ui-react"
import {useSpring, animated, config} from "react-spring"
function Semantix() {
const fading = useSpring({ config: config.slow,
from : {
浏览 1提问于2020-03-29得票数 0
回答已采纳
1回答
在最新版本的react-select (3.1.0)中，虚拟化选项列表的预期方式是什么？有react-virtualized-select，但不再受支持。谢谢。
浏览 55提问于2020-10-20得票数 0
我正在尝试使用material-ui选项卡创建仪表板组件。我希望在每个选项卡中呈现一个不同的组件，它是有效的，但当我的页面加载时，我在控制台中多次收到此警告。
index.js:1 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
in p (created by ForwardRef(Typography))
in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
in Wit
浏览 84提问于2020-06-03得票数 1
回答已采纳
3回答
我似乎不能让语义ui在React组件中工作。JQuery工作正常。但是语义折叠不会响应点击事件。
import React, { Component } from 'react'
import 'semantic-ui/dist/semantic.min.css'
import $ from 'jquery'
import jQuery from 'jquery'
window.jQuery = jQuery
import 'semantic-ui/dist/semantic.min.js'
export d
浏览 0提问于2016-06-30得票数 0
1回答
这是使用react虚拟化表的project link，我需要做按列排序，但在更新列表数组时出错，如何编写表的排序()函数，以便在用户单击列标题时更新表 import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import _ from 'und
浏览 25提问于2019-01-31得票数 1
回答已采纳
我使用的是可扩展面板(Material)，在列中有一个反应虚拟化列表，并且一直存在高度自动调整的问题。我读过几篇这样的文章，以及一些关于react虚拟化站点上的动态行高的问题，但是我有一个特殊的问题，就是当面板展开/折叠后调整行高时，会出现一个“off by one”问题。
以下是预期的行为：
默认情况下，行面板展开。
用户单击可展开面板行。
行面板崩溃。
行高调整到面板崩溃。
以下是第一次单击的实际行为
默认情况下，行面板展开。
用户单击可展开面板行。
行面板崩溃。
行高不适应面板折叠。
但是，在随后的单击中，行高确实会调整，但会调整到“相反”状态
浏览 2提问于2018-06-05得票数 4
1回答
在语义用户界面中导入CSS
、、、、
我将在我的项目中使用Semantic-UI-React，但我遇到了以下问题：
Docs链接：
医生说webpack 1号得到了支持，但不被推荐。我正在使用，它附带webpack版本1.14.0。那么，这是否意味着我不应该在CRA中使用Semantic-UI-React？
对于样式设计，我还想在我的项目中使用一些自定义样式，所以我选择了docs中提到的Semantic UI包的第三个选项。npm install semantic-ui --save-dev在内部运行gulp并创建一个semantic文件夹。但是没有像文档中提到的那样的dist文件夹。我应该从哪个路径引用index.js文
浏览 5提问于2017-06-14得票数 4
回答已采纳
我正在尝试在使用Semantic-UI-React时自定义主题，有关于如何在Semantic-UI中自定义主题的详细说明，就像我们可以覆盖变量来改变它们的样式一样。
但我没有找到任何方法来使用Semantic-UI-React自定义主题，因为没有semantic/src/themes和semantic/src/site文件夹可供我们进行更改，所以Semantic-UI-React附带的只是默认的CSS文件(我们在index.js文件“semantic-ui-css/semanc.min.css”中导入的文件)。
有没有办法在Semantic-UI-React中自定义主题？提前感谢！
浏览 0提问于2020-03-19得票数 1
1回答
具有动态列表尺寸的React窗口
、、、、
我试图将react-window添加到堆栈中，但是所有示例都要求静态地定义列表的宽度和高度，如下所示：
import { FixedSizeList as List } from 'react-window';
const Column = ({ index, style }) => (
<div style={style}>Column {index}</div>
);
const Example = () => (
<List
height={75}
itemCount={1000}
item
浏览 7提问于2022-08-03得票数 1
我正在尝试使用ref引用react-virtualized中的可滚动列表。但是我的ref总是将它的当前属性显示为未定义。有谁知道如何使用ref with react-virtualized List吗？ 下面是我目前正在做的事情，但listRef.current始终是未定义的： const listRef = useRef()
<List
width={350}
height={400}
rowCount={listsprings.length}
rowHeight={100}
rowRenderer={rowRendere
浏览 68提问于2020-11-01得票数 1
3回答
我在react-virtualized中使用了一个List组件来呈现大量的项目。在我的实现中，项目是分段的，并且我希望分段标题是粘性的，以便在用户向下滚动时，当前分段保持可见。本质上，我需要react-virtualized，以便在滚动位置改变时不破坏节标题(但继续破坏其他项)。现在有没有办法做到这一点？我对黑客持开放态度，只要他们不是太疯狂。
浏览 1提问于2016-11-09得票数 7
我在我的node.js react-app上使用typescript。
希望使用semantic-ui-react。然而，我似乎找不到@types/semantic-ui-react。我只能找到@types/semantic-ui。
@types/semantic-ui足够了吗？没有@types我能过得去吗？
我在过去的评论中注意到，早在2016年，他们就在为react开发@types，但似乎找不到@types。
浏览 15提问于2019-03-31得票数 0
回答已采纳
因此，我已经从react-virtualized构建了示例网格，现在希望从API中获取数据并渲染网格。
在react中获取API数据的首选方法是什么？Axios？取回？
浏览 1提问于2017-06-20得票数 0
当我在(F5)中启动我的应用程序的运行调试时，鼠标就不能工作了。我不能再用鼠标左键点击，但是我可以移动鼠标指针，但是没有点击是注册的。我可以按下键盘“选项卡”，然后按回车，但仅此而已。我看不出从哪里开始调试这个问题，所以我添加了我的package.json，也许它可以给出一些线索
在Windows中，我使用Chrome浏览器和其他应用程序，鼠标在那里表现正常。
在这件奇怪的事情发生之前，我所做的就是尝试了"react-scripts": "5xx"。然后我回到了"react-scripts": "4.0.3"
这是我的packag
浏览 6提问于2022-04-21得票数 2
回答已采纳
是否可以让react-virtualized Collection中的单元格内容在滚动时粘在一侧？我通常使用position sticky来做这件事，但这对Collection中的内容不起作用。
我正在构建一个网格电视指南，如下图所示。滚动时，一行最左侧可见单元格的内容应停留在屏幕的左侧。
我可以在不使用react-virtualized的情况下让它工作，但是在滚动了指南一段时间后，太多的数据被渲染，页面变得非常慢。
你们有人能帮我吗？我会非常感激的。
提前谢谢你！
浏览 3提问于2018-11-23得票数 1
我是一个反应的超级新手，并希望利用反应虚拟化的爱好项目。
开始使用react-virtualized的最快方法是什么？我尝试过create-react-app和NPM install react-virtualized，但是我一开始添加新数据就遇到了问题。有什么建议吗？
最终，我希望获取API数据，并将其呈现到带有来自CoinCap的数据的实时网格中，以显示实时加密货币价格。在这方面的任何帮助也将非常感谢！
浏览 0提问于2017-06-19得票数 0
我正在构建一个web应用程序，我喜欢语义UI项目，所以我想在我的UI中使用它。问题是，我对此的反应有些生疏。
该项目基于应用程序模板，我以前已经学习过React的基础知识。我研究过集成语义UI，官网声明不需要特殊的绑定。目前，我在每个页面上都包含了像传统网站一样的语义文件，但我觉得这不是正确的方法。我研究过react-semantic项目，但目前似乎还没有稳定的版本。
有没有人在React中使用语义？最佳实践是什么？
浏览 3提问于2016-03-09得票数 1
在对表数据进行排序时，我似乎不能像中提到的那样调用来更新表数据
我收到了这个错误
未定义“forceUpdateGrid”
当用户单击表标题时，我需要更新表数据，目前它正在页面滚动后更新。表中有3列，需要按每个列标题对表进行排序和更新。
import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/com
浏览 1提问于2019-02-01得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
