如何解决没想到服务器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
但是至少现在广告正在按预期方式加载和运行:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。