【React】自定义组件-文本展开收起组件

最新推荐文章于 2024-04-12 07:15:02 发布

愚愚是个大笨蛋

最新推荐文章于 2024-04-12 07:15:02 发布

阅读量1.4k

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_29698805/article/details/111183036

版权

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用React和Ant Design库创建一个可扩展的文本组件，用户可以点击按钮展开或收起长文本，适合内容管理。通过useState管理组件状态，实现实体隐藏与显示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文章：

长文本展开收起功能实现

1、文本展开收起组件

import React, { PureComponent } from 'react';
import { Typography } from 'antd';
const { Paragraph } = Typography;

/** 文本隐藏/展开组件。参数(rows,content) */
class ExpandableText extends PureComponent {
  state = {
    expand: false,
    counter: 0
  };

  typoExpand = () => {
    this.setState({
      expand: true,
      counter: !this.state.expand
        ? this.state.counter + 0
        : this.state.counter + 1
    });
  };

  typoClose = () => {
    this.setState({
      expand: false,
      counter: !this.state.expand
        ? this.state.counter + 0
        : this.state.counter + 1
    });
  };

  render() {
    const { rows = 3, content } = this.props;
    const { expand, counter } = this.state;
    return (
      <div>
        <div key={counter}>
          <Paragraph ellipsis={{ rows: 3, expandable: true, onExpand: this.typoExpand }} >
            {content}
          </Paragraph>
        </div>
        {expand && <a onClick={this.typoClose}>Close</a>}
      </div>
    );
  }
}

export default ExpandableText;