下一个 js | React - 如何在具有动态内容的页面中插入 Google Ads答案

【问题标题】：Next js | React - How to insert Google Ads in a page with dynamic content下一个 js | React - 如何在具有动态内容的页面中插入 Google Ads
【发布时间】：2023-02-16 03:07:25
【问题描述】：

我从 API 获取文章，然后解析 HTML 代码：

   function Article({ article }) {
      return (
        <PageContainer>
          <div className={styles.container}>
              {parser(article.content.html)}
          </div>
        </PageContainer>
      )
    ;
   }

我的问题是，当我从 API 获得 <div class='google_ad'></div> 之类的内容时，插入 GoogleAdComponent 的最佳方法是什么？

我试过添加一个useEffect，检查是否有一个具有该名称的类，然后 appendChild，但是在 React 中我们需要创建一个元素作为 React 节点，然后将它添加到 React.render() 对吧？我感觉有一个更简单的实现，但我无法在网上找到任何关于此的信息。

提前致谢：）

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码设置 HTML 是有风险的，因为它很容易在无意中使您的用户暴露于跨站点脚本 (XSS) 攻击。因此，您可以直接从 React 设置 HTML，但您必须输入 dangerouslySetInnerHTML 并传递一个带有 __html 键的对象，以提醒自己这是危险的。例如：

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

https://reactjs.org/docs/dom-elements.html

【讨论】：