錯誤。 錯誤：無效掛鈎調用。 鈎子只能在 function 組件的內部調用

Question

我正在創建一個組件庫。 在這個庫中，我創建了一個組件，通過 npm 鏈接將其本地連接到我的項目，所有工作，組件都顯示出來了。 但是當我決定包含styled-components來創建一個組件時。 這是我的組件。

import React, {FC} from 'react'
import styled from "styled-components"
import './mytbc.css'

export interface MyButtonProps{
    color:string;
    big?:boolean;
}

const MyCom: FC<MyButtonProps> = ({children,  color, big, ...props}) => {
    const MyCommon = styled.button`
        background:${color};
        padding:10px;
    `
    return (
        <MyCommon>
            {children}
        </MyCommon>
    )
}
export default MyCom

然后錯誤出現在控制台中。

如何修復這些錯誤以及它們與什么有關？

Answer 1

當我使用 lerna 和 yarn 工作區時，我也遇到過類似的情況。 在我的情況下，問題是使用多個不同版本的反應，一些在 lerna 編譯過程中沒有被提升。

根據文檔

為了讓 Hooks 工作，應用程序代碼中的 react 導入需要解析為與 react-dom package 內部的 react 導入相同的模塊。

運行此命令以列出已安裝的 react 版本。 如果你看到多個 React，你需要弄清楚為什么會發生這種情況並修復你的依賴樹。

npm ls react

或者

yarn list react

在此處閱讀有關問題和解決方案的更多信息

Answer 2

檢查文件 package.json 中的依賴項中是否有樣式組件

經過：

 cd project_name/src
 npm install styled-components