Semantic UI React与React Virtualized集成问题求助

我之前也碰到过一模一样的问题！当时折腾了好久才搞明白原因：Semantic UI的List和List.Item是一套紧密配合的组件，像divided、selection这类属性，其实是靠父组件List来给子元素注入对应的样式类和行为的。但React Virtualized的List组件是完全独立的DOM结构，它不是Semantic的List，所以直接把List.Item丢进rowRenderer里，那些属性根本没法触发Semantic的样式逻辑。

下面是我试过的两种有效解决方案：

方法一：手动添加Semantic CSS类名 #

既然父组件没法帮我们处理样式，那就直接把需要的类名手动加到row元素上。Semantic的样式类都是公开的，比如divided、selection这些，只要和基础的item类一起加进去就行：

import { List as VirtualizedList } from 'react-virtualized';

const rowRenderer = ({ index, key, style }) => {
  return (
    <div
      key={key}
      style={style} // 必须保留这个，React Virtualized靠它定位行
      className="item divided selection" // 手动组合需要的Semantic类
    >
      {yourData[index]}
    </div>
  );
};

// 然后在组件里使用VirtualizedList
<VirtualizedList
  rowCount={yourData.length}
  rowHeight={56} // 匹配Semantic List.Item的默认高度
  width={300}
  height={400}
  rowRenderer={rowRenderer}
/>

这种方法简单直接，不需要依赖Semantic的组件嵌套，适合不需要太多Semantic List高级特性的场景。

方法二：用Semantic List包裹Virtualized List #

如果想完整保留Semantic List的特性（比如响应式样式、hover效果等），可以把React Virtualized的List放在Semantic的List组件里面，然后在rowRenderer里返回List.Item，记得把Virtualized的style传递给List.Item：

import { List } from 'semantic-ui-react';
import { List as VirtualizedList } from 'react-virtualized';

const VirtualizedSemanticList = ({ data }) => {
  return (
    <List divided selection> {/* 这里设置Semantic的属性 */}
      <VirtualizedList
        width={300}
        height={400}
        rowCount={data.length}
        rowHeight={56} // 一定要和Semantic List.Item的实际高度一致
        rowRenderer={({ index, key, style }) => (
          <List.Item key={key} style={style}> {/* 把Virtualized的样式传进去 */}
            {data[index]}
          </List.Item>
        )}
      />
    </List>
  );
};

关键注意点 #

• 一定要匹配rowHeight：Semantic的List.Item默认高度是56px左右，你可以通过浏览器开发者工具查看实际高度，然后把rowHeight设成相同的值，否则滚动时会出现错位或者空白。
• 如果需要自定义List.Item的内容（比如加图标、描述），直接在List.Item里面嵌套Semantic的其他组件就行，和普通用法一样。

这两种方法都能解决divided、selection属性失效的问题，你可以根据自己的需求选一种～

内容的提问来源于stack exchange，提问作者Steven