如何使用 antd 用省略号设置属性“dangerouslySetInnerHTML”？答案

【问题标题】：How to set attribute "dangerouslySetInnerHTML" with ellipsis using antd?如何使用 antd 用省略号设置属性“dangerouslySetInnerHTML”？
【发布时间】：2021-05-26 17:49:36
【问题描述】：

我需要用省略号显示评论。我使用了antd的段落排版。我的问题是评论还可以包含 html 属性（链接到标记的用户），所以我还需要在组件中设置 dangerouslySetInnerHTML。如何在 Typography 组件中设置？

<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
      {comment}
</Paragraph>

预览：

我尝试在 Paragraph 中使用 span 来使用 dangerouslySetInnerHTML，但随后省略号开始为所有长 cmets 显示“...更多”，而没有在注释中显示任何初始字符来填充宽度。在<Paragraph></Paragragh> 中使用除字符串以外的任何 HTML 元素时也会收到警告

<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
      <span dangerouslySetInnerHTML={{ __html: comment.comment }} />
</Paragraph>

预览：

警告：

有什么办法可以实现这个吗？

【问题讨论】：

您是否尝试将跨度更改为 div？：
您可以在此链接上查看相当不错的评论：medium.com/better-programming/… 使用隐身模式
@crizcl，div 也有同样的问题。
实际上，在中使用除字符串以外的任何 HTML 元素时，我也会收到此警告 - 警告：[antd: Typography] ellipsis 应仅将字符串用作子元素。
您使用的省略号库是什么？你能分享链接吗？什么版本的antd？

import React, { useState } from "react"; import Button from "antd/es/button"; import ChopLines from "chop-lines"; import insane from "insane"; const Sanitized = ({ html }) => ( <div className={styles.sanitizedBody} dangerouslySetInnerHTML={{ __html: insane(html, { allowedTags: [ "p", "strong", "em", "a", "b", "i", "span", "div", "br", "u", "img", ], }), }} /> ); const Ellipsis = ({ expand }) => ( <Button size="small" shape="round" type="primary" onClick={expand} > ...see more </Button> ); const Post = ({content}) => { const [expanded, setExpanded] = useState(false); render ( <div> {expanded ? ( <Sanitized html={content} /> ) : ( <ChopLines maxHeight={90} ellipsis={ <Ellipsis expand={expand}> <span>Read More</span> </Ellipsis> } > <Sanitized html={content} /> </ChopLines> )} </div> ); };