reactjs - 材料设计引导程序（MDBReact）不起作用

Question

在使用 mdbreact 组件时出现以下错误，

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

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

 "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "mdbreact": "^4.27.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },

我添加了以下 index.js

   import '@fortawesome/fontawesome-free/css/all.min.css'; 
    import 'bootstrap-css-only/css/bootstrap.min.css';
    import 'mdbreact/dist/css/mdb.css';

应用程序.js

import logo from './logo.svg';
import './App.css';
import CardExample from './ReviewCard'
function App() {
  return (
    <div className="App">
      <CardExample />
    </div>
  );
}

export default App;

ReviewCard.js

import React from 'react';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBCol } from 'mdbreact';

const CardExample = () => {
  return (
    <MDBCol>
      <MDBCard style={{ width: "22rem" }}>
        <MDBCardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" waves />
        <MDBCardBody>
          <MDBCardTitle>Card title</MDBCardTitle>
          <MDBCardText>
            Some quick example text to build on the card title and make
            up the bulk of the card&apos;s content.
          </MDBCardText>
          <MDBBtn href="#">MDBBtn</MDBBtn>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
  )
}

export default CardExample;

Answer 1

我不认为是因为 MDBReact。也许您可以将 Hooks 移动到主要的默认功能中。

此外，如果您可以共享您的代码，我们可以更轻松地提供帮助。

Answer 2

您必须使用命令 npm i mdb-react-ui-kit 安装最新的 mdb npm 包。它适用于 React 17。您无需降级您的反应版本

在 index.js 中添加以下行 import 'mdb-react-ui-kit/dist/css/mdb.min.css'

在 index.html 中为 fontawesome 添加以下行

Answer 3

看起来他们没有迁移到 latest react ^17。尝试将反应版本减少到16.*. 它就像魅力一样。

这是package.json我使用的：

"dependencies": {
    "mdbreact": "4.27.0",
    "react": "16.14.0",
    "react-dom": "17.0.0",
    "react-scripts": "3.4.3"
  },

这是您可以查看的演示