如何解决如何使用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>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。