ReactJS Reactstrap 徽章组件

Reactstrap 是一个基于引导的 React UI 库，用于通过其无缝且易于使用的组件制作漂亮的网页。

在本文中，我们将了解如何在 Reactstrap 中使用 Badges 组件。徽章用于创建标签。徽章通过使用相对字体大小来缩放以匹配直接父元素的大小。

句法：

Content

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install reactstrap bootstrap
```

项目结构：它将如下所示。

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

示例 1：这是展示如何使用徽章组件的基本示例。

App.js

import React from 'react';
import { Badge } from 'reactstrap';
  
  
const Example = (props) => {
  return (
    
      GeeksforGeeks 10
    
  );
}
  
export default Example;

App.js

import React from 'react';
import { Badge } from 'reactstrap';
  
  
const Example = (props) => {
  return (
    
      GeeksforGeeks 10
    
  );
}
  
export default Example;

Javascript

import React from 'react';
import { Badge, Button } from 'reactstrap';
  
const gfg = (props) => {
  return (
    
      

      
    
  );
};
  
export default gfg;

输出：

示例 2：在此示例中，我们将制作药丸类型的徽章。

应用程序.js

import React from 'react';
import { Badge } from 'reactstrap';
  
  
const Example = (props) => {
  return (
    
      GeeksforGeeks 10
    
  );
}
  
export default Example;

输出：

示例 3：在此示例中，我们使用了显示悬停效果的徽章。

应用程序.js

Javascript

import React from 'react';
import { Badge, Button } from 'reactstrap';
  
const gfg = (props) => {
  return (
    
      

      
    
  );
};
  
export default gfg;

输出：

参考： https://reactstrap.github.io/components/badge/