如何使用ReactJs格式化嵌入式推文？

Question

我收到一封来自服务器的文档，它接收嵌入的推文并以这种方式注入：

renderDetails() {
  return (
    <div className="new-content">
      <h1 className="title-new">{this.state.new.title}</h1>
      <div className="body-new" 
        dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.state.new.content)}}
      ></div>
    </div>
  );
}

内容有以下形式：

<div class="new-content">
.
.
.
<blockquote>America(@VOANoticias)&nbsp;<a href="https://twitter.com/VOANoticias/status/1110915154106085377?ref_src=twsrc%5Etfw">27 de marzo de 2019</a></blockquote>
.
.
.

如何处理这些数据以显示格式化为推文的blockquote？

Answer 1

您可以从锚标记中选择tweet-id并使用它来创建推文programmatically。

const twitterItems = Array.from(document.querySelectorAll("a[href^='https://twitter.com']"));

twitterItems.forEach((item) => {
  const extractedUrlStr = item.href;
  const url = new URL(extractedUrlStr);
  const tweetID = url.pathname.split("/")[3];
  const parentQuote = item.parentNode;
  parentQuote.innerHTML = "";
  twttr.widgets.createTweet(tweetID, parentQuote);
});

对于React，您可能会在componentDidMount中插入此代码

PS：如果blockquote是correct defined format，只需在文档中包含脚本就可以为你格式化推文。

Codepen Demo