antd Paragraph展开可收起组件封装

antd Paragraph可以提供展开的功能，以下在其基础封装一个展开后可以收起的组件

import React, { ReactNode, useState, useEffect } from 'react';
import { Typography, Tooltip } from 'antd';
import { ParagraphProps } from 'antd/lib/typography/Paragraph';

export interface ILabelValueProps {
  label?: ReactNode;
  value: ReactNode;
  valueConfig?: ParagraphProps;
  colon?: boolean;
  tooltip?: boolean;
}
type Props = ILabelValueProps;

const { Paragraph } = Typography;

export function LabelValue(props: Readonly<Props>) {
  const { label, value, colon, tooltip, valueConfig } = props;
  const rows = tooltip ? 1 : 3;
  const [key, setKey] = useState(0);
  const [fold, setFold] = useState(true);
  const onExpand = () => {
    setFold(false);
  };
  const onCollapse = () => {
    setFold(true);
    setKey(key + 1);
  };
  return (
    <>
      <div key={key}>
        <Paragraph
          ellipsis={{
            rows,
            expandable: !tooltip,
            onExpand: onExpand
          }}
          {...valueConfig}
        >
          {value}
          {!fold && (
            <span className="value-collapse" onClick={onCollapse}>
              收起
            </span>
          )}
        </Paragraph>
      </div>
    </>
  );
}

export default LabelValue;