antd 中 Paragraph无收起按钮antd中Paragraph无收起按钮//rows控制超出几行显示省略//fo

antd 中 Paragraph无收起按钮 // rows 控制超出几行显示省略

// fold 控制是否显示‘收起’

// key 保持每一个div的key值已备diff算法更新

onst [fold, setFold] = useState(false);
const [key, setKey] = useState(0);

// 控制点击展开

const onExpand = () => {
  setFold(true)
}

//控制收起

const onCollapse = (e) => {
  e.preventDefault(); 
  setFold(false)
  setKey(key + 1)
}

// 渲染

style={{ shiteSpace:'pre-line' }} //渲染的时候解析回车符号不然不会通过回车符号换行

<div key={key}>
   <Paragraph ellipsis={{ rows, expandable: isShow ? true:false,onExpand: onExpand }}>
   	{ fold ? <span style={{ shiteSpace:'pre-line' }}>{cpntent}<a onClick={onCollapse}>收起</a></span> : cpntent}
    </Paragraph>
</div>