基于antd的paragraph组件实现文本的展开收起功能

** 直接看代码就行了，主要坑点在于isExpand状态传入ellipsis配置时，isExpand的更新不会触发ellipsis的更新，导致无法按照预期收起，此时可以设置一个key，利用key的改变来强制触发组件更新** 还有一个思路，直接将ellipsis配置整体作为一个state状态，更新这个ellipsis，应该也可以触发组件更新（没有验证过）

import React, { useEffect, useState } from 'react'
import { Typography } from 'antd'
import { ReactComponent as UserAvatorIcon } from '@/assets/icons/userAvator.svg'
import styles from './index.less'
interface IQuestionCard {
  prompt: string
}
const { Paragraph, Text } = Typography
const QuestionCard: React.FC<IQuestionCard> = ({ prompt }) => {
  const [isExpand, setIsExpand] = useState(false)

  return (
    <div className={styles.container}>
      <div className={styles.icon}>
        <UserAvatorIcon />
      </div>
      <Paragraph
        // 增加key强制组件重新渲染，解决无法收起的问题
        key={isExpand ? 'expanded' : 'collapsed'}
        ellipsis={
          isExpand
            ? false
            : {
                rows: 2,
                expandable: true,
                symbol: 'more',
                onExpand: () => setIsExpand(!isExpand),
              }
        }>
        {prompt}
        {isExpand ? (
          <span className={styles.foldIcon} onClick={() => setIsExpand(!isExpand)}>
            收起
          </span>
        ) : null}
      </Paragraph>
    </div>
  )
}

export default QuestionCard