React组件实现Firestore返回内容的折叠展开功能需求

直接给你修改好的代码，实现点击展开/收起文本的功能，核心用React的useState控制状态，搭配两种实现方式，你可以选适合的：

方案一：用CSS line-clamp 实现优雅截断（推荐） #

这种方式不需要手动处理文本内容，靠CSS控制显示行数，简洁高效：

import { useState } from 'react';
import { TableContainer, Typography, Button } from '@mui/material';

export default function PocketDataResponse({ firestore, urlParams }) {
    const recordRef = firestore
        .collection("devices").doc(urlParams.deviceId)
        .collection("records").doc(urlParams.recordId);

    const record = useRecord(recordRef);
    const [isExpanded, setIsExpanded] = useState(false); // 控制展开状态

    return (
        record ?
            <TableContainer sx={{ 
                ...styles.TableContainer, 
                '& .truncated-text': { 
                    overflow: 'hidden', 
                    display: '-webkit-box', 
                    WebkitLineClamp: 3, 
                    WebkitBoxOrient: 'vertical' 
                } 
            }}>
                <Typography variant="body1">
                    Body: 
                    <span className={isExpanded ? '' : 'truncated-text'}>
                        {record.response.body}
                    </span>
                </Typography>
                <Button onClick={() => setIsExpanded(!isExpanded)} size="small">
                    {isExpanded ? '收起' : '更多'}
                </Button>
                <br/><br/>
                <Typography variant="body1">
                    Headers: {record.response.headers.toString()}
                </Typography>
            </TableContainer>
            : <Typography> Record not found </Typography>
    );
}

方案二：手动截取文本内容（适合精确控制行数场景） #

如果需要严格按换行分割显示前N行，用这种方式：

import { useState } from 'react';
import { TableContainer, Typography, Button } from '@mui/material';

export default function PocketDataResponse({ firestore, urlParams }) {
    const recordRef = firestore
        .collection("devices").doc(urlParams.deviceId)
        .collection("records").doc(urlParams.recordId);

    const record = useRecord(recordRef);
    const [isExpanded, setIsExpanded] = useState(false);
    const displayLines = 3; // 初始显示行数

    if (!record) {
        return <Typography> Record not found </Typography>;
    }

    // 按换行符分割文本为行数组
    const bodyLines = record.response.body.split('\n');
    // 根据状态决定显示内容
    const displayBody = isExpanded 
        ? bodyLines.join('\n') 
        : bodyLines.slice(0, displayLines).join('\n') + (bodyLines.length > displayLines ? '...' : '');

    return (
        <TableContainer sx={styles.TableContainer}>
            <Typography variant="body1">
                Body: {displayBody}
            </Typography>
            {/* 只有文本行数超过设定值时才显示按钮 */}
            {bodyLines.length > displayLines && (
                <Button onClick={() => setIsExpanded(!isExpanded)} size="small">
                    {isExpanded ? '收起' : '更多'}
                </Button>
            )}
            <br/><br/>
            <Typography variant="body1">
                Headers: {record.response.headers.toString()}
            </Typography>
        </TableContainer>
    );
}

简单说明 #

• 两种方案都通过useState管理展开状态，点击按钮切换isExpanded的值
• 方案一的CSS截断更适配大部分纯文本场景，自动处理溢出，不会破坏原文本格式
• 方案二适合需要精准控制换行显示的场景，比如文本本身有明确的行结构
• 按钮用了MUI的Button组件，你也可以换成普通HTML按钮，自行调整样式

内容的提问来源于stack exchange，提问作者Paul