关于前端:基于antd的文字展开折叠组件

最近因为需要，须要开发一个反对文字开展折叠的性能，看了下 antd 的官网，给的例子只反对开展，不反对折叠，搜查一番，找到一个 Stack Overflow 上的例子，传送门，依据例子批改了下。

思路：通过给 Paragraph 设置 key，去动静的批改展现内容
代码：

import React, {PureComponent, Fragment} from 'react';
import {Typography} from 'antd';

const {Paragraph} = Typography;

export default class ParagraphExpand extends PureComponent {
  state = {
    fold: false,
    key: 0,
  };
  onExpand = () => {this.setState({ fold: true});
  };
  onCollapse = e => {e.preventDefault();
    this.setState(({key}) => ({fold: false, key: key + 1}));
  };
  render() {const { rows = 1, content} = this.props;
    const {fold, key} = this.state;
    return (
      <Fragment>
        <div key={key}>
          <Paragraph ellipsis={{rows, expandable: true, onExpand: this.onExpand}}>
            {content}
          </Paragraph>
        </div>
        {fold && <a href=":;" onClick={this.onCollapse}>Collapse</a>}
      </Fragment>
    );
  }
}