type
status
date
slug
summary
tags
category
icon
password
在尝试使用canvas-confetti时，我发现自己没有理解示例网站应该怎么使用、导入包时出现了一些bug、官方仓库用的是nodejs而不是react……
上面提到的种种问题将在这篇博客得到解决！
这是一篇小小的记录和分享，记录了如何在React框架中使用canvas-react，希望能帮到遇到和我一样问题的人。
如何在react/nextjs中使用“canvas-confetti”而不是“react-canvas-confetti”
这是canvas-confetti的官方仓库：
里面提到了包的安装方法，但实际上当我安装时，我需要安装的是这个包 这个解决方法来自stackflow：
1. 首先你需要下载包时加上@types：
(最重要的，仓库推荐的方法有bug)。
2. 从官方示例网站中复制粘贴函数
如图中的confettiAction。
你可以在官方的示例网站中找到合适的礼花方案
链接网页中的每一个代码块都记录了一个完整的函数，你只需要复制粘贴他们，并且包装成回调函数就可以在react中使用（个人理解）。
例如将这个函数包装好导出
3 调用函数，如在button的onclick调用
我在我的一个nextjs项目段落生成器中用到了这个组件，欢迎来玩。
点击generate成功生成结果之后就会抛出礼花🎉
我也直接为这个按钮增加了一个页面
关于我我是一个正在学习和实现网站开发的开发者，希望在今年运营出一个 MRR $100 的作品。
如果你发现了什么问题、可改进的地方，或者只是想随意地聊聊天，都非常欢迎联系我！
[即刻 @Sawana](https://okjk.co/Mx4XUR)
[X @HSawana9](https://twitter.com/HSawana9)
- 作者:Sawana H
- 链接:https://tangly1024.com/article/use-canvas-confetti-in-react-or-nextjs
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
