如何使用危險的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 。