Question

我正在尝试将我的Facebook页面插件包含在我的反应应用中。我正在尝试使用react-helmet来实现这一点，但我遇到了一个问题。如果我将其作为文档建议的脚本标记放入，则脚本会运行两次，但只会添加到<head>部分...我正在使用starter kit。

这就是我所拥有的

Html.jsx（负责渲染整个html页面，link to file）：

render() {
const {assets, component, store} = this.props
const content = component ? ReactDOM.renderToString(component) : ''
const head = Helmet.rewind()

return (
  <html lang="en-us">
    <head>
      ...
      {head.script.toComponent()}
      ...
)

在我的App.jsx中：

<Helmet
      script={[
        // {"type": 'text/javascript', "innerHTML": `{!function(f,b,e,v,n,t,s){}...cut down for brevity;console.log('I was fired');}`}
      ]}
      {...config.app.head}/>

由于某种原因导致Facebook Pixel Error: Duplicate Pixel ID: XYZ

，上面的日志语句会触发两次

如果需要更多信息，请告诉我

Answer 1

请注意，根据source，react-helmet吹走它呈现的所有服务器头标记，然后重新创建它们。我不完全理解为什么他们这样做（也许他们只能替换已经改变的标签？可能枚举已经改变的属性有点困难？）但这就是造成问题的原因。

我知道，因为我有同样的问题;）

对于解决方案，以下是一些可能性：

停止使用react-helmet来管理跟踪像素/脚本/代码段 - 而只是将它们粘贴到等效的renderPage()和/或index.html
创建一个反应头盔的拉动请求，停止这样做（或者只是问他们，这可能会更快！）
将所述代码包装在某种防护中（在window对象上放置一个属性，然后只在找不到该属性的情况下运行任何内容）
创建一个反应头盔的拉动请求，允许您说“不重新渲染”。关于某些元素或某些内容

我还没有找到我真正喜欢的解决方案，但其中任何一个都应该有效，祝你好运：）

请注意，我已创建了issue here

Answer 2

作为旁注，如果您在body中包含脚本，它将呈现两次。因此，我使用head在defer中添加它们以保持可接受的效果。

脚本标记在通用响应应用程序（FB插件）中运行两次

2 个答案: