Question

我正在使用材料-ui和React。我有一个列表视图，如下所示：

<List>
    <Subheader>List Title</Subheader>
    <ListItem primaryText="Option One" />
    <Divider />
    <ListItem primaryText="Option Two" />
    <Divider />
    <ListItem primaryText="Option Three" />
</List>

每个项目之间都有一个分隔符，但在第一个项目之前或之后没有分隔符。到目前为止一切都很好。

我刚刚实现了一个简单的包装器，它根据用户权限呈现或不呈现列表项。所以它看起来像这样：

<List>
    <Subheader>List Title</Subheader>
    <Restricted permission={1}>
        <ListItem primaryText="Option One" />
    </Restricted>
    <Divider />
    <Restricted permission={2}>
        <ListItem primaryText="Option Two" />
    </Restricted>
    <Divider />
    <Restricted permission={4}>
        <ListItem primaryText="Option Three" />
    </Restricted>
</List>

Restricted组件将用户权限与指定权限进行比较，并返回子组件或null。这一切都有效，但如果没有呈现选项，显然会保留分隔线。

我可以将Residerted组件中的分隔符与ListItem一起包装，ListItem在大多数情况下会呈现我想要的内容但如果最后一个项目没有呈现则会在底部留下一个分隔符。我需要的是一种说法，如果这是列表中的最后一项，则不要渲染分隔符。

目前我的计划是以编程方式生成一系列可显示的列表项，然后使用适当的分隔符在循环中呈现它。但这意味着我将不得不使用每个组件中的决策逻辑而不是单个包装器。这感觉不对。

我错过了React / material-ui的某些方面，这将使我能以更优雅的方式实现我想要的目标吗？

Answer 1

我提出以下解决方案。首先将列表的表示移动到变量

const allOptions = [
  { text: "Option 1", permission: 1 },
  { text: "Option 2", permission: 2 },
  { text: "Option 3", permission: 4 }
]

然后使用过滤器仅获取允许的选项

const permittedOptions = listItems.filter(checkPermission)

使用map创建列表项

const listItems = permittedOptions.map(option => <ListeItem text={option.text} />)

现在只在有下一个和上一个列表项

时才放置分隔符

const listItemsWithDividers = [];
listItems.forEach((item, index) => {
  listItemsWithDividers.push(item)
  if (listItems[index + 1] !== undefined) {
     listItemsWithDividers.push(<Divider />)
  }
})

最后呈现它

<List>
    <Subheader>List Title</Subheader>
    {listItemsWithDividers}
</List>

Answer 2

更具成本效益的方法看起来像这样

<div>
      <List>
        {items.map((item) => (
          <div key={item.id}>
            <ListItem>
              <ListItemText primary={item.name} />
            </ListItem>
            {item.id !== items.length ? <Divider /> : null}
          </div>
        ))}
      </List>
    </div>

Answer 3

{items.data.map((item, index) => (
<ListItem button key={index} divider={index < items.length - 1}>
...
</ListItem>
)})

React / Material-UI检测List

3 个答案: