Javascript 为Gatsby JS创建BuyMeACoffee组件

我正在尝试为我的盖茨比网站创建一个Buy Me a Coffee React组件，即使我的盖茨比网站在开发模式下运行并成功构建，该组件（Buy Me a Coffee widget）在加载页面时也不会显示

我的网站使用MDX，因此理想情况下，我希望能够将该组件导入到我的博客文章中。我喜欢将它导入到我的博客帖子中，因为它允许我选择性地包含它，而如果我使用标准解决方案（如gatsby-ssr.js）来包含第三方“给我买一个咖啡”脚本，我预计在组件显示和不显示的页面上进行管理会困难得多

目前，我使用库浏览器monads，因此不必执行

typeof！==“未定义”

构建我的站点的条件检查。使用他们在这里推荐的传统条件格式没有帮助。另外，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;

---

我建议使用

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>,
  ]);
};

如果不需要

回调

函数参数（尽管它很有用），也可以将其删除

在

componentDidMount（）

中调用它们（这将是一个技巧，因为您需要等待DOM树加载，直到访问

文档

全局对象）：

---

我注意到我忘了更新我的导出名称

导出默认LoadBuyMeACoffee更新为
导出默认值没有帮助。感谢您的回复。不幸的是，我真的不想使用gatsby-ssr.js，因为我希望能够在我的博客帖子中选择性地包含“给我买杯咖啡”脚本。我已经用一个新的试用版@Mac Mann更新了这个问题
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);
};

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