我正在尝试将我的 Facebook 页面插件包含在我的 React 应用程序中。我正在尝试使用 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
如果需要更多信息，请告诉我
最佳答案
请注意，根据 source , react-helmet 吹掉它渲染的所有服务器头标签，然后重新创建它们。我不完全理解他们为什么这样做(也许他们只能替换已更改的标签？也许枚举已更改的属性有点困难？)但这就是导致您的问题的原因。
我知道，因为我也有同样的问题;)
至于解决方案，以下是一些可能性:
- 停止使用react-helmet来管理跟踪像素/脚本/片段 - 而只需将它们粘贴到相当于
renderPage()和/或index.html< - 为react-helmet创建一个拉取请求，停止执行此操作(或者直接询问他们，这可能会更快!)
- 将所述代码包装在某种防护中(在
window对象上放置一个属性，然后仅在未找到该属性时运行任何该内容) - 为react-helmet创建一个拉取请求，允许您对某个元素或类似的内容说“不重新渲染”
我还没有找到我真正喜欢的解决方案，但其中任何一个都应该有效，祝你好运:)
请注意，我创建了一个 issue here
关于facebook - 脚本标签在通用 react 应用程序(FB插件)中运行两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37355346/