Material 设计 Bootstrap (MDBReact) 不工作

Question

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

←→1 of 2 errors on the page 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:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

 "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';

App.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

看起来他们没有迁移到最新的 react ^17。尝试将 React 版本降低到 16.*。它就像魅力一样。

这是我使用的package.json：

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

这是demo你可以检查

Answer 3

您必须使用命令 npm i mdb-react-ui-kit 安装最新的 mdb npm 包。它将与 React 17 一起使用。你不需要降级你的 React 版本

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

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

Material 设计 Bootstrap (MDBReact) 不工作

Material Design Bootstrap (MDBReact) is not working

reactjs

material-design

mdbreact