[英]How to set attribute "dangerouslySetInnerHTML" with ellipsis using antd?
我需要用省略號顯示評論。 我為此使用了 antd 的 Paragraph Typography。 我的問題是評論也可以包含 html 屬性(鏈接到標記用戶)所以我還需要在組件中設置dangerouslySetInnerHTML 。 如何在 Typography 組件中設置它?
<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
{comment}
</Paragraph>
我嘗試在 Paragraph 中使用 span 來使用dangerouslySetInnerHTML ,但隨后省略號開始只對所有長評論顯示“...更多”,而沒有在評論中顯示任何初始字符來填充寬度。 在<Paragraph></Paragragh>
中使用除字符串以外的任何 HTML 元素時也會收到警告
<Paragraph ellipsis={{ rows: 2, expandable: true, 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>
);
};
我認為我們現在不能在antd中做到這一點。 react-truncate-html怎么樣
前任:
import Truncate from 'react-truncate-html';
<Truncate
lines={3}
dangerouslySetInnerHTML={{
__html: "Hi, <strong>here’s some</strong> <i>HTML</i>"
}}
/>
我不知道如何制作自定義省略號文本、按鈕……(例如:閱讀更多)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.