gpt4 book ai didi

javascript - 尝试在 React 组件中运行 Ko-Fi 小部件。在 DIV 中运行 <script> 命令

转载 作者:行者123 更新时间:2023-12-05 07:11:51 25 4
gpt4 key购买 nike

因此,这是我必须运行的脚本,以便在我的网站上实现 Ko-Fi 小部件。

<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
<script type='text/javascript'>
kofiwidget2.init('Buy me a coffe!', '#3c807c', 'XXXXXXXXXX');
kofiwidget2.draw();
</script>

我的网站是一个用 React 构建的单页应用程序,所以这就是我正在做的。

1 - 我移动了加载 widget_2.js 的脚本到 <head>我的index.html文件:

index.html

<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>

我应该添加 async 吗?到这个脚本标签?

2 - 我正在尝试将其余部分加载到我的 React 组件中,但到目前为止没有成功:

我试过:

// NOTE: IT'S DISPLAYING AS MULTI-LINE HERE JUST TO MAKE IR MORE READABLE
return(
<div dangerouslySetInnerHTML={{__html:
"<script type='text/javascript'>
kofiwidget2.init('Buy me a coffee!', '#3c807c', 'XXXXXXXXXX');
kofiwidget2.draw();
</script>"
}}>
);

还有:

return(
<div>
<script type="text/javascript">
kofiwidget2.init("Buy me a coffee!", "#3c807c", "XXXXXXXXXX");
kofiwidget2.draw();
</script>
</div>
);

似乎什么也没发生。

额外信息:

kofiwidget2.draw();方法执行以下操作:

draw: function () {
document.writeln(style + html.replace("[color]", color).replace("[text]", text).replace("[id]", id));
}

它使用 document.writeln方法。所以我想这应该正好在我需要加载按钮的地方运行。即:在 div 内部。

片段(尝试在 React 中的 DIV 内运行脚本命令)

function App() {
return(
<script type="text/javascript">console.log('TEST_1');</script>
);
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

最佳答案

互联网上没有很多解决方案(相信我,我一直在搜索)。我想使用交互式小部件。这是我的解决方案。它与您的一个非常相似,但略有修改。我也在 nextjs 工作。

添加从 'next/head' 导入 Head

在你的功能组件的顶部添加

<Head>
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'/>
</Head>

创建一个字符串让你的生活更轻松:

const kofi = 
`<script>
kofiWidgetOverlay.draw('pixelbakery', {
'type': 'floating-chat',
'floating-chat.donateButton.text': 'Tip Us',
'floating-chat.donateButton.background-color': '#ff5f5f',
'floating-chat.donateButton.text-color': '#fff'
});
</script>`

在你的组件中某处:

 <div dangerouslySetInnerHTML={{ __html: kofi }} />

关于javascript - 尝试在 React 组件中运行 Ko-Fi 小部件。在 DIV 中运行 &lt;script&gt; 命令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60615358/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com