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

问题描述

我在加载带有react的AdSense广告时遇到了一些问题。该站点基于asp.net，我通常使用@ Html.React（“组件名称”）在服务器端渲染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>
        );
    }
}

我完全感谢有很多类似的问题-我已经看过所有这些问题，但是似乎没有一个问题可以解决这个问题。任何帮助，非常感谢：）

解决方法

我想我已经设法解决了。我知道这不是最好的解决方案，但似乎可行。希望会帮助别人。

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

但是至少现在广告正在按预期方式加载和运行：）