为 Gatsby JS 创建 BuyMeACoffee 组件

Question

我正在尝试为我的 Gatsby 网站创建一个 Buy Me A Coffee React 组件，即使我的 Gatsby 网站在开发模式下运行并成功构建，该组件（Buy Me A Coffee 小部件）在加载页面。

我的网站使用 MDX，所以理想情况下我希望能够将组件导入到我的博客文章中。我喜欢将它导入我的博客文章的想法，因为它允许我有选择地包含它，而如果我使用像 gatsby-ssr.js 这样的标准解决方案来包含第三方 Buy Me A Coffee 脚本，我预见它会更多很难规范组件在哪些页面上显示和不显示。

目前，我使用库 browser-monads，因此我不必为构建我的网站执行typeof !== "undefined" 条件检查。使用他们在这里推荐的传统条件格式并没有帮助。此外，styles.scss 目前是空的。我正在导入它，以防以后需要返回并为我的组件添加样式。

感谢您的帮助！

下面是我的代码：

import React from 'react';
import './styles.scss'
import { window, document, exists } from 'browser-monads';

class BuyMeACoffee extends React.Component {
    constructor(props){
        super(props)
        let script = document.createElement("script");
            script.setAttribute('data-name','BMC-Widget')
            script.src = "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
            script.setAttribute('data-id', 'x');
            script.setAttribute('data-description', 'Thank you for your support!');
            script.setAttribute('data-message', "We're proudly reader-supported! If our content helps you, we would be honored and greatly appreciate it if you'd consider buying us a coffee!");
            script.setAttribute('data-color',"#2962ff")
            script.setAttribute('data-position','right')
            script.setAttribute('data-x_margin','18')
            script.setAttribute('data-y-margin','18')
            script.async = true
            //Call window on load to show the image
            script.onload=function(){
                var evt = document.createEvent('Event');  
                evt.initEvent('load', false, false);  
                window.dispatchEvent(evt);
            }
        this.script=script
    }

    componentDidMount () {    
        document.head.appendChild(this.script)
    }

    componentWillUnmount(){
        document.head.removeChild(this.script);
        document.body.removeChild(document.getElementById("bmc-wbtn"))
     }

    render(){
        return(null)
    }
}

export default LoadBuyMeACoffee;

Answer 1

我建议使用gatsby-ssr.js 方法，而不是直接在类组件中添加负载性能。像这样的东西应该适合你：

const React = require("react");

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      data-name="Mac-Mann-Widget"
      src="https://cdn.buymeacoffee.com/widget/1.0.0/prod/widget.prod.min.js"
      data-id="eshlox"
      data-description="Support me on Buy me a coffee!"
      data-message="Thank you for visiting. You can now buy me a coffee!"
      data-color="#FF813F"
      data-position="right"
      data-x_margin="28"
      data-y_margin="18"
    ></script>,
  ]);
};

我会留下上面的sn-p，看看它是否对某人有帮助。

---

感谢您的回复。不幸的是我真的不想使用 gatsby-ssr.js 因为我希望能够选择 在我的博客文章中包含 Buy Me A Coffee 脚本。 – 麦克曼 4 几小时前

你可以试试这样的：

• 创建一个函数，该函数将按需异步渲染脚本：

  const addExternalScript = (url, callback) => {
      const script = document.createElement('script');
      script.src = url;
      script.async=true;
      script.onload = callback;
      // add as many parameters as you need.
      document.body.appendChild(script);
  };
  

  如果您不需要 callback 函数参数，尽管它很有用，您也可以删除它。

• 在您的 componentDidMount() 中调用它们（这会成功，因为您需要等待 DOM 树加载，直到访问 document 全局对象）：

  componentDidMount(){
    addExternalScript(`https://cdn.buymeacoffee.com/widget/1.0.0/prod/widget.prod.min.js`)
  }