Как я могу отформатировать встроенные твиты с помощью 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

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

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 Demo