没想到服务器 HTML 在 <ins> 中包含 <ins> - React Hybrid 中的 AdSense 广告答案

【问题标题】：Did not expect server HTML to contain a <ins> in <ins> - AdSense ad within react hybrid没想到服务器 HTML 在 <ins> 中包含 <ins> - React Hybrid 中的 AdSense 广告
【发布时间】：2020-10-18 11:03:40
【问题描述】：

我在加载 AdSense 广告时遇到了一点问题。该站点基于 asp.net，我通常使用 @Html.React("组件名称") 在服务器端呈现反应组件，然后如果需要，我使用 fetch 调用更新组件，因此基本上是混合解决方案。

对于 AdSense，很遗憾，我收到了这个错误：

Warning: Did not expect server HTML to contain a <ins> in <ins>

据我了解，它抱怨服务器呈现的标记已在客户端发生更改，这显然是由于 AdSense 在浏览器中加载页面后加载广告所致。结果，在 Chrome 中我看不到广告，但它确实设法在 Firefox 上加载它们：/

不幸的是，我不确定如何修复它...我如何才能让知道该组件可以在客户端更改的反应？

这是组件代码：

import React from "react";

import { IAdSenseAdProps } from "./IAdSenseAdProps";

export class AdSenseAd extends React.Component<IAdSenseAdProps, {}> {
    constructor(props: IAdSenseAdProps) {
        super(props);
    }

    componentDidMount() {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
    };

    render() {
        return (
            <ins
                className="adsbygoogle"
                data-adtest={this.props.dataAdTest}
                {...this.props.style != null && { "style": this.props.style }}
                {...this.props.dataAdFormat != null && { "data-ad-format": this.props.dataAdFormat }}
                {...this.props.dataAdLayoutKey != null && { "data-ad-layout-key": this.props.dataAdLayoutKey }}
                data-ad-client={this.props.dataAdClient}
                data-ad-slot={this.props.dataAdSlot}>
            </ins>
        );
    }
}

我非常感谢有很多类似的问题 - 我已经看到了所有这些问题，但似乎没有一个可以解决这个问题。非常感谢任何帮助:)

【问题讨论】：

标签： asp.net reactjs adsense hybrid react-ssr

【解决方案1】：

我想我刚刚设法修复它。我知道这不是最好的解决方案，但似乎正在工作。希望能帮助别人。

我基本上设法欺骗了 react 并添加了虚假的 HTML 结构。与 AdSense 使用相同的 html 结构，因此我的代码现在如下所示：

import React from "react";

import { IAdSenseAdProps } from "./IAdSenseAdProps";

export class AdSenseAd extends React.Component<IAdSenseAdProps, {}> {
    constructor(props: IAdSenseAdProps) {
        super(props);
    }

    componentDidMount() {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
    };

    render() {
        return (
            <ins
                className="adsbygoogle"
                data-adtest={this.props.dataAdTest}
                {...this.props.style != null && { "style": this.props.style }}
                {...this.props.dataAdFormat != null && { "data-ad-format": this.props.dataAdFormat }}
                {...this.props.dataAdLayoutKey != null && { "data-ad-layout-key": this.props.dataAdLayoutKey }}
                data-ad-client={this.props.dataAdClient}
                data-ad-slot={this.props.dataAdSlot}>
                <ins><ins><iframe></iframe></ins></ins>
            </ins>
        );
    }
}

我开始收到一个新错误：

Extra attributes from the server: width,height,frameborder,marginwidth,marginheight,vspace,hspace,allowtransparency,scrolling,allowfullscreen,onload,id,name,style

但至少现在广告正在按预期加载和工作:)

【讨论】：