Question

我编写了以下组件以在我的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

第一次安装组件时，效果很好。

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

我试图将脚本放在componentDidUpdate中，但没有成功。

PS：我搜索了一个组件，但发现的唯一组件是react-pinterest，该组件没有维护两年，并且无法在我的应用中使用。

有人可以帮助我吗？

Answer 1

我今天发现自己处于完全相同的位置。在使用相同的react-pinterest npm包的分支进行搏斗之后，我在此问题_meta.fields中找到了解决方案。

您似乎已经通过添加data-pin-build="doBuild"数据属性来接近目标，但是当用户点击其他路线返回组件时，您没有调用doBuild()。添加数据属性指示pinit.js将doBuild()添加到全局范围，但是在重新安装组件时不会自动调用该函数。

尝试将您的componentWillMount函数替换为以下内容：

componentDidMount() {
  if (!window.doBuild) {
    this.preloadWidgetScript();
  } else {
    window.doBuild();
  }
}

preloadWidgetScript = () => {
  const script = document.createElement('script');
  script.async = true;
  script.dataset.pinBuild = 'doBuild';
  script.src = '//assets.pinterest.com/js/pinit.js';
  document.body.appendChild(script);
}

要注意的另一件事是从componentWillMount更改为componentDidMount，这是确保在运行doBuild()之前呈现嵌入链接所必需的。

Answer 2

就我而言，使用@ n33kos的答案，它可以与useEffect一起使用，并且每次都可以使用（到目前为止，无需检查它是否已附加脚本）。在这里，指向pinterest的<a>链接存在于作为HTML注入的markdown文件中

  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

在React中嵌入Pinterest小部件

2 个答案: