Question

我正在从服务器接收一个文档，该文档接收到嵌入的tweet并以这种方式注入：

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，然后使用它来创建tweet 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

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

1 个答案: