Reactjs 在React中嵌入Pinterest小部件

我编写了以下组件以在我的React应用程序中嵌入Pinterest小部件：

import React, { Component } from 'react'

class PinterestWidget extends Component {
  componentWillMount() {
    const script = document.createElement('script')

    script.async = true
    script.type = 'text/javascript'
    script['data-pin-build'] = 'doBuild'
    script.src = '//assets.pinterest.com/js/pinit.js'
    document.body.appendChild(script)
  }

  render() {
    const { url } = this.props

    return (
      <a data-pin-do="embedPin" data-pin-build="doBuild" href={url}>
        {url}
      </a>
    )
  }
}

export default PinterestWidget

import React，{Component}来自“React”
类PinterestWidget扩展组件{
组件willmount（）{
常量脚本=document.createElement（'script'）
script.async=true
script.type='text/javascript'
脚本['data-pin-build']='doBuild'
script.src='/assets.pinterest.com/js/pinit.js'
document.body.appendChild（脚本）
}
render（）{
const{url}=this.props
返回(
)
}
}
导出默认PinterestWidget

当组件第一次安装时，它工作正常

但是，当我导航到另一条路径并返回到此页面时，它不再呈现小部件

我试图将脚本放入

componentdiddupdate

，但没有成功

PS：我搜索了一个组件，但我找到的唯一一个组件是没有维护2年的，并且在我的应用程序中不起作用

---

有人能帮我吗？

我今天发现自己也处在同样的境地。在与相同的

react pinterest

npm包的叉子搏斗之后，我找到了解决这个问题的方法

通过添加

data pin build=“doBuild”

data属性，您似乎已经接近成功，但当用户点击不同的路径后返回组件时，您没有调用

doBuild（）

。添加数据属性会指示

pinit.js

将

doBuild（）

添加到全局范围，但在重新装载组件时不会自动调用该函数

尝试将

组件willmount

函数替换为以下内容：

componentDidMount（）{
如果（！window.doBuild）{
这个.preload.widgetscript（）；
}否则{
window.doBuild（）；
}
}
Preload WidgetScript=（）=>{
const script=document.createElement（'script'）；
script.async=true；
script.dataset.pinBuild='doBuild'；
script.src='//assets.pinterest.com/js/pinit.js'；
document.body.appendChild（脚本）；
}

---

另一件需要注意的事情是从

componentWillMount

更改为

componentDidMount

，这对于确保在运行

doBuild（）

之前呈现嵌入链接是必要的。在我的例子中，使用@n33kos的答案，它可以与

useffect

一起工作，而且到目前为止，每次都是这样（不检查是否附加了脚本）。此处指向pinterest的

链接存在于作为html注入的标记文件中

  useEffect(() => {
    const script = document.createElement('script')
    script.async = true
    script.type = 'text/javascript'
    script.dataset.pinBuild = 'doBuild'
    script.src = '//assets.pinterest.com/js/pinit.js'
    document.body.appendChild(script)
    if (window.doBuild) window.doBuild()
  }, []) // only run once

---

你一针见血！真是妙不可言。谢谢你的帮助！；）没问题，很乐意帮忙！