Как установить атрибут «опасноSetInnerHTML» с многоточием с помощью antd?

Question

Мне нужно показать комментарий с многоточием. Для этого я использовал типографику абзаца antd. Моя проблема в том, что комментарий также может содержать атрибуты html (ссылка на помеченных пользователей), поэтому мне также нужно установить в компоненте dangerousSetInnerHTML . Как установить это в компоненте «Типографика»?

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

Предварительный просмотр:

Я попытался использовать span внутри Paragraph, чтобы использовать опасноSetInnerHTML, но затем многоточие начало показывать просто «... больше» для всех длинных комментариев, без каких-либо начальных символов в комментарии для заполнения ширины. Также появляется предупреждение об использовании любого HTML-элемента внутри <Paragraph></Paragragh> кроме строки

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

Предварительный просмотр:

Предупреждение:

Любой обходной путь для достижения этого ??

Answer 1

Во-первых, мне бы понравилась эта функциональность и для 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>
    );
};

Answer 2

Я думаю, что мы не можем сделать это сейчас. Как насчет реакции-truncate-html

Бывший:

      import Truncate from 'react-truncate-html';
 
<Truncate
  lines={3}
  dangerouslySetInnerHTML={{
   __html: "Hi, <strong>here’s some</strong> <i>HTML</i>"
  }}
/>

Я понятия не имею, как сделать собственный текст с многоточием, кнопку и т. д. (например, подробнее)