如何使用危险的SetInnerHTML加载内容来处理“多读或少读”

Question

我需要在反应组件中应用“多读或少读”。 问题是响应的内容是来自 html 的，或者你可以说所有的富文本

其中的标签。 从前端我正在使用

<div
            style={{ padding: 15 }}
            className="text-right single-content"
            dangerouslySetInnerHTML={{ __html: post.content }}
/>

但是现在当我使用反应库“react-read-more-less”时，我必须编写组件并以这种方式加载内容

<ReadMoreAndLess
                  ref={this.ReadMore}
                  className="read-more-content"
                  charLimit={250}
                  readMoreText="Read more"
                  readLessText="Read less"
>
                  {post.content}
  </ReadMoreAndLess>

但是它无法正常工作，它加载与内容相关的每个标签。 在此处输入图片说明

谢谢 。

Answer 1

如果您的帖子内容是 HTML，则需要使用类似https://www.npmjs.com/package/react-html-parser 的内容来避免使用dangerouslySetInnerHTML 。