参考文章：

长文本展开收起功能实现

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;