显示隐藏切换列表组件AntDesign

Question

有没有办法限制AntDesign中“列表组件”中列出的数据？ 我想在列出10个项目后放置“隐藏和显示”切换。

这是我所做的事情的示例

这是我的代码

  const { detailsSource } = props;

  <List
   itemLayout="horizontal"
   dataSource={detailsSource}
   header={<div>Request Details</div>}
   footer={<a onClick={toggleDetails}>More Details</a>}
   bordered
   renderItem={item => (
     <>
      <Row
       type="flex"
       style={{
         padding: '10px 24px',
         borderBottom: '1px solid #e8e8e8',
       }}
      >
        <Col span={12}>{item.label}</Col>
        <Col span={12}>{item.description}</Col>
      </Row>
    </>
  )}
/>

Answer 1

如果只想在添加10个项目之前不显示页脚，则可以在页脚道具中检查条件。我假设您的detailsSource有长度

footer={
   detailsSource.length > 10 
     ? <a onClick={toggleDetails}>More Details</a>
     : ""
}

Answer 2

您可以使用loadMore组件可用的List属性。可以在以下位置找到其文档中的示例：https://ant.design/components/list/#components-list-demo-loadmore

Answer 3

我认为您可以通过修改detailsS​​ource

const [isToggle, setIsToggle] = useState(false)
const LIMIT = 10
const data = isToggle ? detailsSource.filter((item, index) => index <= LIMIT) : detailsSource

然后您就可以使用数据

  <List
   itemLayout="horizontal"
   dataSource={data}
   header={<div>Request Details</div>}
   footer={<a onClick={toggleDetails}>More Details</a>}
   bordered
   renderItem={item => (
     <>
      <Row
       type="flex"
       style={{
         padding: '10px 24px',
         borderBottom: '1px solid #e8e8e8',
       }}
      >
        <Col span={12}>{item.label}</Col>
        <Col span={12}>{item.description}</Col>
      </Row>
    </>
  )}