Блог

Я получаю документ с сервера, который получает встроенный твит, и внедряю его таким образом:

 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)amp;nbsp;<a href="https://twitter.com/VOANoticias/status/1110915154106085377?ref_src=twsrc^tfw">27 de marzo de 2019</a></blockquote>
.
.
.
  

Как я могу обработать эти данные, чтобы показать blockquote отформатированный как твит?

Вы можете выбрать tweet-id из тега привязки и использовать его для создания твита программно.

 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: Если цитата из блока имеет правильно определенный формат, простое включение скрипта в документ отформатирует твит для вас.

Демо-версия Codepen