0

我在加载 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>
        );
    }
}

我完全明白有很多类似的问题——我都看过了，但似乎没有一个能解决这个问题。非常感谢任何帮助:)

4

1 回答 1

0

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

我基本上设法欺骗了反应并添加了虚假的 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

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

于 2020-10-18T11:58:13.397 回答