当我使用我自己的样式化组件库时，出现无效的钩子调用错误
当我使用我自己的样式化组件库时，出现无效的钩子调用错误
提问于 2020-06-30 23:31:04
我从样式化组件库(使用typescript和rollup)创建了自己的UI工具。
例如，我有以下组件：
import styled from 'styled-components'
export const MyUITest2 = styled.div`
color: red;
`所以，我在另一个项目中使用了这个组件：
<MyUITest2>This is my test</MyUITest2>并且，当我运行应用程序时，我得到：
The above error occurred in the <styled.div> component:
in styled.div (at ...)
...
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See ... react-invalid-hook-call for tips about how to debug and fix this problem.我认为样式化组件有问题，因为当我使用没有样式化组件的简单组件时，我的组件显示在应用程序上。
这里是我的github存储库：https://github.com/aehp20/ionic-react-my-ui-components
提前谢谢你！
回答 1
Stack Overflow用户
发布于 2021-10-20 15:17:39
检查您的package.json并确保react和react-dom不存在于依赖项中，相反，将它们都添加到peerDependencies中。
当有两个不同的react实例运行时，就会发生此错误，因此如果您在UI库中安装了react，那么它将与您实现UI库的项目的react版本发生冲突。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62661001
复制相关文章
相似问题
腾讯云开发者
