0

我尝试使用 typescriptMaterial-UI在私有react组件库（NPM 包）中安装，自定义一些MUI组件，然后将它们从我自己的包中导入到另一个应用程序中。

问题是，它总是在应用程序中抛出一个错误，说：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

  1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
  2. 您可能违反了 Hooks 规则
  3. 您可能在同一个应用程序中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅https://reactjs.org/link/invalid-hook-call 。

控制台错误：

在此处输入图像描述

NPM 包中的样式化 MUI 组件（私有组件库）：

import * as React from 'react'
import { makeStyles, Checkbox, CheckboxProps } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
  root: {
    '& + .MuiFormControlLabel-label.Mui-disabled': {
      color: theme.palette.grey[400],
    },
  },
}))

export const StyledCheckbox: React.FC<CheckboxProps> = (props) => {
  const classes = useStyles()

  return (
    <Checkbox
      className={classes.root}
      color='default'
      inputProps={{ 'aria-label': 'decorative checkbox' }}
      {...props}
    />
  )
}

export default StyledCheckbox

这就是我在包（index.ts文件）中导出组件的方式：

export { ThemeProvider } from '@material-ui/core/styles'
export { Box } from '@material-ui/core'
export { StyledCheckbox } from './components/StyledCheckbox'
export theme from 'theme/theme'

MyComponent.tsx在应用程序（文件）中导入组件：

import React, { useState } from 'react'
import { StyledCheckbox } from 'private-component-library'

export const MyComponent: React.FC = () => {
  const [error, setError] = useState(false)
  const [loading, setLoading] = useState<boolean>(false)

  return (
     <Box pb={5}>
        <StyledCheckbox />
     </Box>
  );
}

export default MyComponent

以及内容App.tsx

import * as React from 'react'
import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
import { ThemeProvider } from 'private-component-library'
import theme from 'private-component-library'

import MyComponent from './MyComponent'

const App: React.FC = () => {
  const location = useLocation()

  return (
    <ThemeProvider theme={theme}>
      <Switch>
        <Route path='/' children={<MyComponent />} />
        <Redirect
          from='/:url*(/+)'
          to={{ ...location, pathname: location.pathname.slice(0, -1) }}
        />
      </Switch>
    </ThemeProvider>
  )
}

export default App

和index.tsx申请文件：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <Router basename='/home'>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root'),
)

我尝试从我的私有 NPM 包中删除react和react-dom依赖项，甚至将它们添加为peerDependenciesordevDependencies并没有帮助。

我还尝试了https://reactjs.org/link/invalid-hook-call的调试步骤，也无济于事。

它有什么问题？

4

0 回答 0