从api抓取数据后运行脚本标签

Question

场景:我在文章的详细信息部分有一个带有react的网站，当我从api获得详细信息时，有脚本和标签，这些标签是视频的来源。问题:当我的组件加载时。文章的详细信息取自api，但不执行脚本标记。这是获取正确详细信息的方法吗？如何运行这些脚本？

export const DetailBlog = ({content}) => {

    return (
        content ?
            <article className="article__detail">
                <div className="article_detail__content" 
                     dangerouslySetInnerHTML={{__html: content.description}}/>
             <article>
            :
            null
    )
};

Answer 1

默认情况下，动态创建并添加到文档中的脚本是异步的，它们不会阻止呈现并在下载后立即执行

​

[
  '1.js',
  '2.js'
].forEach(function(src) {
  const script = document.createElement('script');`enter code here`
  script.src = src;
  document.head.appendChild(script);
});

​

但是，我们可以明确地将它们标记为非异步：

​

[
    '1.js',
    '2.js'
].forEach(function(src) {
  const script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
   });

​

这为我们的脚本提供了一种纯HTML无法实现的混合行为。