How to handle "read more or less" using dangerouslySetInnerHTML to load Content

Question

I need to apply "read more or less" in react component. The problem is that content in response is in html from or you can say rich text with all the

tags in it. And from frontend i am handling this using

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

But now as i am using react library 'react-read-more-less' i have to write the component and have to load the content in this way

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

But its not working properly its loading each tags associated with the content. enter image description here

Thanks .

Answer 1

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