React 中 Collapse 组件：如何动态展开单个卡片？

2024-03-22 23:18:34

在 React 中使用 Collapse 组件动态展开单个卡片

在构建 React 应用程序时，我们经常需要动态地显示和隐藏内容。一种实现此目的的流行方法是使用 Material UI 中的 Collapse 组件。然而，当涉及到仅展开单个卡片时，可能会遇到一些挑战。本文将逐步指导您解决此问题，并提供一个使用 Collapse 组件在 React 中动态展开单个卡片的完整代码示例。

问题

在使用 Collapse 组件时，我们可能会遇到这样的情况：当单击“显示更多”按钮时，整个可见列都会随之展开。这并不是我们想要的效果，因为我们只希望展开所选卡片的内容，而不是整个列。

解决方案

要解决此问题，我们需要采用以下步骤：

1. 导入 Collapse 组件

首先，我们需要导入 Collapse 组件。

import { Collapse } from "@mui/material";

2. 创建状态变量

接下来，我们需要使用 useState 钩子创建一个布尔状态变量，名为 isExpanded，用于跟踪卡片是否展开。

const [isExpanded, setIsExpanded] = useState(false);

3. 处理按钮点击事件

为“显示更多”按钮添加一个 onClick 处理程序，以切换 isExpanded 状态。

<Button onClick={() => setIsExpanded(!isExpanded)}>...</Button>

4. 使用 Collapse 组件

我们将 Collapse 组件包装在卡片的 CardActions 部分中，并在 in 属性中使用 isExpanded 状态。

<Collapse in={isExpanded} timeout="auto" unmountOnExit>...</Collapse>

5. 设置动画和样式

最后，我们可以使用 Collapse 组件的 timeout 和 unmountOnExit 属性来控制展开和折叠动画。

完整代码示例

import React, { useState } from "react";
import { Collapse } from "@mui/material";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";

const Product = ({ name, description, price, rating }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Card>
      <CardContent>
        <Typography variant="h5" component="div">
          {name}
        </Typography>
        <Typography sx={{ mb: "1.5rem" }} color="text.secondary">
          ${price}
        </Typography>
        <Rating value={rating} readOnly />
        <Typography variant="body2">{description}</Typography>
      </CardContent>
      <CardActions>
        <Button
          variant="primary"
          size="small"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          See More
        </Button>
      </CardActions>
      <Collapse in={isExpanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography>Additional information...</Typography>
        </CardContent>
      </Collapse>
    </Card>
  );
};