将 Buy Me A Coffee 小部件添加到 React 应用程序
[英]Add Buy Me A Coffee Widget to React application
问题描述
我正在尝试创建一个组件，该组件在我的反应单页应用程序的某些路由中呈现Buy Me A Coffee小部件。 到目前为止，这是我的组件：
class BuyMeACoffee extends React.Component {
componentDidMount () {
const 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', 'boulderproblems');
script.setAttribute('data-description', 'Thank you for your support!');
script.setAttribute('data-message', 'This web is free to use. Do you want to help supporting it?');
script.setAttribute('data-color',"#FF5F5F")
script.setAttribute('data-position','right')
script.setAttribute('data-x_margin','18')
script.setAttribute('data-y-margin','18')
script.async = true
document.head.appendChild(script)
}
render(){
return(null)
}
}
当我使用开发人员工具检查页面时，标签位于 head 部分的末尾，一切似乎都正确，但小部件未显示在页面中。
注意：如果我复制 index.html 页面头部的脚本代码：
<script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="boulderproblems" data-description="Thank you for your support!" data-message="This web is free to use. Do you want to help supporting it?" data-color="#FF5F5F" data-position="right" data-x_margin="18" data-y-margin="18"></script>
然后它完美地工作。 问题是，在这种情况下，小部件会显示所有路线。 我也尝试过 react-helmet 但没有成功。
5 个解决方案
解决方案1
9 已采纳 2020-05-28 14:59:37
我终于让它工作了。 我在这里发布我的解决方案，以防它对某人有用。 不确定它是否是最优雅的，但它确实有效。 我稍微修改了原始组件，以便在卸载组件时删除脚本和小部件。 这是现在的组件：
class BuyMeACoffe 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', 'boulderproblems');
script.setAttribute('data-description', 'Thank you for your support!');
script.setAttribute('data-message', 'This web is free to use. Do you want to help supporting it?');
script.setAttribute('data-color',"#FF5F5F")
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('DOMContentLoaded', 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)
}
}
基本上，在阅读了 buymeacoffee 脚本后，我意识到当 window is DOMContentLoaded 事件被触发时，它们会加载小部件。 我所做的是在插入脚本后手动触发此事件。
注意：这样做之后，我不得不添加几个 styles 因为小部件显示在屏幕外。 也许是因为我的布局。 无论如何，如果您需要它们，它们就在这里：
#bmc-wbtn{
bottom: 15px;
}
#bmc-wbtn + div{
bottom:15px;
}
解决方案2
1 2021-05-03 11:43:39
您可以简单地将buymecoffee.com提供的复制代码添加到您的 React 项目的index.html的head标签中。 它将自动加载你的 React 应用程序的 onLoad。 如果需要，您可以自定义其中的属性，但我认为您不需要创建单独的组件来使其工作。 您可以在公共文件夹中找到您的 index.html。
项目名称 > 公共 > index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script
data-name="BMC-Widget"
data-cfasync="false"
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
data-id="codesim"
data-description="Support me on Buy me a coffee!"
data-message=""
data-color=""
data-position="Right"
data-x_margin="18"
data-y_margin="18"
></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
解决方案3
0 2021-05-24 12:16:45
更简单的方法。
你可以像这样创建一个反应组件。
咖啡.js
function Coffee() {
return (
<a
className="buyButton"
target="_blank"
href="https://www.buymeacoffee.com/theshubhagrwl"
>
<img
className="coffeeImage"
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
alt="Buy me a coffee"
/>
<span className="coffeeButtonText">Buy me a coffee</span>
</a>
);
}
Styles.css
.buyButton {
text-decoration: none;
display: inline-flex;
align-items: center;
color: #ffffff;
background-color: #ff813f;
border-radius: 5px;
border: 1px solid transparent;
padding: 0.5rem;
font-size: 1rem;
letter-spacing: 0.6px;
box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5);
font-family: cursive;
}
.buyButton:hover,
.buyButton:active,
.buyButton:focus {
text-decoration: underline;
box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5);
opacity: 0.85;
color: #ffffff;
}
.coffeeImage {
height: 2vh;
box-shadow: none;
border: none;
vertical-align: middle;
}
.coffeeButtonText {
margin-left: 15px;
font-size: 0.8rem;
vertical-align: middle;
}
这将使您轻松定制。
解决方案4
0 2021-06-08 14:05:26
对于小部件，您可以将其嵌入 iframe
const BuyMeACoffeeWidget = () => {
const path = "https://www.buymeacoffee.com/widget/page/PskV9Rt?description=Support%20me%20on%20Buy%20me%20a%20coffee!&color=%235F7FFF";
return (
<iframe className="bmc" src={path} />
);
};
export default BuyMeACoffeeWidget;
添加自定义样式
.bmc{
height: 100%;
border: antiquewhite;
border-radius: 1px;
}
并在需要时在您的仓库中使用
<BuyMeACoffeeWidget />
此外，如果您想将重定向图像添加到您的应用程序，只需将图像放在 Public/image 文件夹中并在代码中使用 imag 源标记中的路径。
我截取了图像，将其放在图像文件夹中并在代码中使用它
const BuyMeACoffeeSupport = () => {
return (
<a href="https://www.buymeacoffee.com/PskV9Rt">
<img src="img/bmc.PNG" />
</a>
);
}
export default BuyMeACoffeeSupport;
并在需要时在您的仓库中使用
<BuyMeACoffeeSupport/>
解决方案5
0 2021-08-10 08:16:46
该解决方案适用于功能组件
import React, { useEffect } from "react";
export default function Buymeacoffee() {
// const
useEffect(() => {
const script = document.createElement("script");
const div = document.getElementById("supportByBMC");
script.setAttribute(
"src",
"https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
);
script.setAttribute("data-name", "BMC-Widget");
script.setAttribute("data-cfasync", "false");
script.setAttribute("data-id", "algorithammer");
script.setAttribute("data-description", "Support me on Buy me a coffee!");
script.setAttribute(
"data-message",
"Buying a single coffee for me is 1000 times worth than a Thankyou "
);
script.setAttribute("data-color", "#5F7FFF");
script.setAttribute("data-position", "Right");
script.setAttribute("data-x_margin", "18");
script.setAttribute("data-y_margin", "18");
script.onload = function () {
var evt = document.createEvent("Event");
evt.initEvent("DOMContentLoaded", false, false);
window.dispatchEvent(evt);
};
div.appendChild(script);
}, []);
return <div id="supportByBMC"></div>;
}
.supportFromHome {
bottom: 15px;
}
output：在页面底部：
谁能给我一个关于如何使用React Widget的DateTimePicker的示例
[英]Can someone give me an example on how to use React Widget's DateTimePicker
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.