reactjs - 在 React 中嵌入 Pinterest 小部件

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 2 年未维护 — 并且在我的应用程序中不起作用。

谁能帮帮我？

Answer 1

今天我发现自己处于完全相同的位置。在与相同的 fork 搏斗之后 react-pinterest npm package 我在这个问题上找到了解决方案 https://github.com/pinterest/widgets/issues/13 .

看起来您已经通过添加 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() .