react-virtualized - 将 Semantic UI React 与 React Virtualized 结合使用

Question

我在让 React Virtualized 与 Semantic UI 一起正常工作方面遇到了困难。

根据下面的示例，我可以通过将 className 属性设置为“item”来将正确的样式应用于列表中的项目。

然而，我遇到的问题是从 Semantic 的 HOC 组件(例如 List)传递到 List.Item 的 props。划分和选择等 Prop 。还有其他人遇到过这个问题吗？有解决办法吗？

https://codesandbox.io/s/31l6ol4kkm

Answer 1

您将无法将列表属性从语义 UI 传递到 React-Virtualized 列表内的 List.Item，因为这些属性不被 React-virtualized 列表接受。你所做的嵌套会阻止你实现你想要的结果。但是，您可以创建自定义样式表以传递给 List.Item。对我有用的一个例子是使用以下代码:

const dividedStyle = {
  borderBottom:"1px solid #ccc",
  margin:"5px",
  padding:"5px"
}
const rowRenderer = ({ key, index, style }) => (
  <List.Item key={key} style={dividedStyle}>
    <List.Content>
      <List.Header>
        {items[index]}
      </List.Header>
      Is a person
      <List.Description>
        Description
      </List.Description>
    </List.Content>
  </List.Item>
)

可能还有其他方法可以做到这一点，但这种方法效果很好。您还可以将 VList 和 List.Item 渲染包装在单独的组件中，并向其传递“Divided”属性。您可以在该组件内设置它的样式，然后封装上面的代码，并为您提供可重用的 VList 和 List.Item 组合。