如何在 React.js 中使用 mdbreact

如果您正在使用 React.js 构建应用程序并需要为其添加 UI 组件和功能，MDBReact 可能是一个不错的选择。MDBReact 是一个基于 Bootstrap 的开源库，提供了许多常用的 UI 组件。

安装 MDBReact

使用 npm 安装 MDBReact：

npm install mdbreact

导入 MDBReact 组件

在你的 React 组件中导入 MDBReact：

import React from 'react';
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCol,
  MDBContainer,
  MDBRow,
} from 'mdbreact';

使用 MDBReact 组件

在你的 React 组件中使用 MDBReact 组件：

const App = () => {
  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol md='6'>
          <MDBCard>
            <MDBCardBody>
              <MDBCardTitle>React + MDBReact</MDBCardTitle>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <MDBBtn color='primary' href='#'>
                点击按钮
              </MDBBtn>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
};

完整示例代码

完整的 React.js 示例代码：

import React from 'react';
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCol,
  MDBContainer,
  MDBRow,
} from 'mdbreact';

const App = () => {
  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol md='6'>
          <MDBCard>
            <MDBCardBody>
              <MDBCardTitle>React + MDBReact</MDBCardTitle>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <MDBBtn color='primary' href='#'>
                点击按钮
              </MDBBtn>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
};

export default App;

可以看到，MDBReact 提供的组件易于使用，甚至将一些常见的布局和样式设计做好，您可以更快地构建您的 React UI。