材料设计引导(MDBReact)不起作用

Question

​

​

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

页错误上的两个错误中的←→1 :无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：

1. 您可能有React和呈现器的版本不匹配(例如React )。
2. 你可能违反了胡克斯的规则
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';

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

看起来它们没有迁移到最新的react ^17。尝试减少对16.*的react。就像魅力一样。

下面是我使用的package.json：

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

这是您可以检查的演示

Answer 2

我不认为是因为MDBReact。也许您可以将钩子移动到主默认函数中。

此外，如果您能够共享您的代码，我们可以帮助更容易。

Answer 3

您必须安装最新的mdb软件包使用命令npm i mdb反应-ui-工具包。它将适用于React 17。您不需要降低您的react版本的级别。

在index.js导入‘mdb-react kit/dist/css/mdb.min.css’中添加下面一行

在index.html中添加下面一行的字体