ReactJS Reactstrap 布局组件介绍

ReactJS Reactstrap 是基于 ReactJS 的 UI 组件库，其中包含了许多常用的布局组件，如容器、栅格、排列等，用于快速构建美观的网页 UI。

安装

通过 npm 安装：

npm install reactstrap

然后在项目中引入所需组件即可。

容器

容器组件用于在网页中定义一个内容的区域，通常在容器内部构建其他组件。Reactstrap 中提供了三种容器：

• Container: 最基础的容器，宽度填充整个屏幕，它是一种固定大小的布局容器。
• Container-fluid: 可以自适应宽度的容器，它可以自由调整宽度以适应不同的屏幕大小。
• Container-sm/md/lg/xl: 可以适配不同屏幕尺寸的容器，使用时只需选择对应的尺寸即可。

使用

import { Container } from 'reactstrap';

function App() {
  return (
    <Container>
      <h1>Hello, world!</h1>
    </Container>
  );
}

上述代码创建了一个基本的容器组件，容器中包含了一个标题为“Hello, world!”的组件。此时容器将会填充整个屏幕。

栅格

栅格系统用于将页面水平分为 12 个列，以方便布置不同的组件。Reactstrap 中引入了 Bootstrap 的栅格系统，提供了 Row 和 Col 两种组件。

Row

Row 组件用于包含多个 Col 组件，并且会进行水平分割。

import { Container, Row, Col } from 'reactstrap';

function App() {
  return (
    <Container>
      <Row>
        <Col>1</Col>
        <Col>2</Col>
        <Col>3</Col>
      </Row>
    </Container>
  );
}

上述代码创建了一个包含三个 Col 的 Row 组件，这些 Col 会均匀地水平分割屏幕。

Col

Col 组件用于定义行内的某个组件占据的列数和偏移量，它可以取 1~12 个列的宽度。

import { Container, Row, Col } from 'reactstrap';

function App() {
  return (
    <Container>
      <Row>
        <Col md="4">1</Col>
        <Col md={{ size: 4, offset: 4 }}>2</Col>
        <Col md="4">3</Col>
      </Row>
    </Container>
  );
}

上述代码创建了一个包含三个 Col 的 Row 组件，第一个和第三个 Col 每个占据了 4 个列的宽度，第二个 Col 占据了 4 个列的宽度并且向右偏移了 4 个列的宽度，使其位于 Row 中间位置。

排列

排列组件用于在容器或者其他布局组件中调整子组件的排列方式。Reactstrap 中提供了如下排列组件：

• Align: 纵向排列方式。
• Justify: 横向排列方式。
• Order: 排序方式。

Align

使用 Align 组件可以将子组件按照纵向方向排列，支持的属性值有 start、center、end 和 stretch。

import { Container, Row, Col } from 'reactstrap';

function App() {
  return (
    <Container>
      <Row className="align-items-start">
        <Col>1</Col>
        <Col>2</Col>
        <Col>3</Col>
      </Row>
    </Container>
  );
}

上述代码创建了一个 Align 组件，其将子组件按照上对齐方式排列。

Justify

使用 Justify 组件可以将子组件按照横向方向排列，支持的属性值有 start、center、end、between 和 around。

import { Container, Row, Col } from 'reactstrap';

function App() {
  return (
    <Container>
      <Row className="justify-content-around">
        <Col>1</Col>
        <Col>2</Col>
        <Col>3</Col>
      </Row>
    </Container>
  );
}

上述代码创建了一个 Justify 组件，其将子组件按照平均分布方式排列，并且元素之间留有一定的空隙。

Order

使用 Order 组件可以调整子组件的排列顺序，其支持的属性值有 0~12，值越小越靠前。

import { Container, Row, Col } from 'reactstrap';

function App() {
  return (
    <Container>
      <Row>
        <Col>1</Col>
        <Col>2</Col>
        <Col>3</Col>
      </Row>
      <Row>
        <Col xs="12" md={{ order: 3, size: 6 }}>4</Col>
        <Col xs="12" md={{ order: 1, size: 6 }}>5</Col>
        <Col xs="12" md={{ order: 2, size: 6 }}>6</Col>
      </Row>
    </Container>
  );
}

上述代码创建了一个 Order 组件，其将第二排的子组件按照一个特定的顺序排列，并且元素的显示顺序和排列顺序不同。

总结

Reactstrap 提供了许多常用的布局组件，这些组件可以快速构建美观的网页 UI，并且可以对子组件进行排列调整和排序。这些组件使用和调整起来都非常简单，适合使用 ReactJS 开发的程序员快速掌握并使用。