如何使用antd设置带有省略号的属性“dangerouslySetInnerHTML”？

问题描述

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

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

预览：

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

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

预览：

警告：

实现这一目标的任何解决方法？？

解决方法

首先，我也很喜欢 antd Typography 的这个功能，但目前情况并非如此，所以在此期间，这里有一些工作要做。

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>
    );
};