封装ReactBootstrap组件实现文字展开功能

最新推荐文章于 2024-10-16 21:35:12 发布

马达加斯加D

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量159

点赞数

分类专栏：前端/安卓文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_38803409/article/details/129168596

版权

前端/安卓专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用React和ReactBootstrap库创建一个可展开/折叠的文本组件。当文本超过指定的最大高度(maxHeight)时，会显示‘ReadMore’按钮，用户点击后可展开全文；若已展开，点击则收起。此组件适用于限制长文本显示。

摘要由CSDN通过智能技术生成

封装ReactBootstrap组件实现文字展开功能

ExpendableText.js

import React, { useRef, useEffect, useState } from "react";
import { Container, CardGroup, Card, Row, Col, Button} from "react-bootstrap";
import styles from '@/styles/Home.module.css'

const MAX_POSSIBLE_HEIGHT = 500;

  
  const ExpendableText = ({ maxHeight, children }) => {
    const ref = useRef();
    const [expanded, setExpanded] = useState(true);
  
    useEffect(() => {
      if (ref.current.scrollHeight > maxHeight) {
        setExpanded(false);
      }
    }, [maxHeight]);
  
    return (
      <Card.Text as="h6" style={styles.cardText} ref={ref}>
        <div
          style={{ maxHeight: expanded ? MAX_POSSIBLE_HEIGHT : maxHeight, overflowY: 'hidden' }}
        >
          {children}
        </div>
        {expanded ? <Button variant="light" onClick={() => setExpanded(!expanded)}>Read Less</Button> :
                    <Button variant="light" onClick={() => setExpanded(!expanded)}>Read More</Button>}
      </Card.Text>
    );
  };

export default ExpendableText

<ExpendableText maxHeight={70}>
GrassROOTS Community Foundation (GCF) is a training organization with an emphasis on public health and social action. We invest in our community members' collective well-being, and teach them how to use their healthy energy to transform themselves, their families and communities. 
We support, develop and tailor wellness programs for women and girls, particularly those who grew up in economic distress. We also advocate for policies and practices that reduce racial and gender disparities and foster equity.
</ExpendableText>