Next js|React -如何在包含动态内容的页面中插入Google Ads

5kgi1eie 于 2023-02-19 发布在 React

关注(0)|答案(1)|浏览(219)

我从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（）中，对吗？我感觉有一个更简单的实现，但是我在网上找不到关于这个的任何信息。
提前感谢：）

next.js

来源：https://stackoverflow.com/questions/75464373/next-js-react-how-to-insert-google-ads-in-a-page-with-dynamic-content

1条答案

按热度按时间

gajydyqb1#

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
但决不能将其用于用户输入，只能用于可信来源

赞(0）回复(0）举报 2023-02-19

我来回答

Next js|React -如何在包含动态内容的页面中插入Google Ads

1条答案

相关问题

热门标签

最新问答