[英]How to set attribute "dangerouslySetInnerHTML" with ellipsis using antd?
I need to show comment with ellipsis.我需要用省略号显示评论。 I have used antd's Paragraph Typography for it.我为此使用了 antd 的 Paragraph Typography。 My problem is that comment can also contain html attributes (link to tagged users) so I also need to set dangerouslySetInnerHTML in the component.我的问题是评论也可以包含 html 属性(链接到标记用户)所以我还需要在组件中设置dangerouslySetInnerHTML 。 How to set this in Typography component?如何在 Typography 组件中设置它?
<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
{comment}
</Paragraph>
I tried using span inside Paragraph to use dangerouslySetInnerHTML , but then ellipsis started showing just "...more" for all long comments, without showing any initial characters in the comment to fill the width.我尝试在 Paragraph 中使用 span 来使用dangerouslySetInnerHTML ,但随后省略号开始只对所有长评论显示“...更多”,而没有在评论中显示任何初始字符来填充宽度。 Also getting a warning on using any HTML element inside <Paragraph></Paragragh>
other than string在<Paragraph></Paragragh>
中使用除字符串以外的任何 HTML 元素时也会收到警告
<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
<span dangerouslySetInnerHTML={{ __html: comment.comment }} />
</Paragraph>
Any workaround for achieving this??实现此目标的任何解决方法?
First off I would love this functionality for antd Typography as well but that is not the case at the moment so here is a bit of a work around for you in the meantime.首先,我也喜欢 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>
);
};
I think we can't do it in antd now.我认为我们现在不能在antd中做到这一点。 How about react-truncate-html react-truncate-html怎么样
Ex:前任:
import Truncate from 'react-truncate-html';
<Truncate
lines={3}
dangerouslySetInnerHTML={{
__html: "Hi, <strong>here’s some</strong> <i>HTML</i>"
}}
/>
I have no idea how to make custom ellipsis text, button, ... (ex: read more)我不知道如何制作自定义省略号文本、按钮……(例如:阅读更多)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.