Question

我在使用语义UI正确地使用React Virtualized时遇到了困难。

根据下面的示例，我可以通过将className prop设置为＆＃39; item＆＃39;来将正确的样式应用于列表中的项目。

然而，我遇到的问题是从Semantic的HOC组件（例如List）传递给List.Item的道具。道具如划分和选择。还有其他人遇到过这个问题并且有解决方案吗？

Answer 1

您无法将Semantic UI中的List属性传递到React-Virtualized列表中的List.Item，因为反应虚拟化列表不接受这些属性。你正在做的嵌套是阻止你实现你想要的结果。但是，您可以创建自定义样式表以传递给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渲染包装在一个单独的组件中，您可以将其传递给＆＃34; Divided＆＃34;属性。您可以在该组件内设置样式，然后封装上面的代码，并为您提供可重复使用的VList＆amp; List.Item组合。

使用语义UI反应与React Virtualized

1 个答案: