ReactJS Reactstrap 媒体组件

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

在本文中，我们将看到如何在 Reactstrap 中使用媒体组件。媒体组件用于向我们的项目添加一些媒体。

特性：

• Tag：在 ReactStrap Media Component 中，Tag 是一个属性，用于设置组件中的标签。它接受字符串和函数值。
• className：在 ReactStrap Media Component className中定义组件的类名。在 className 的帮助下，您可以使用 CSS 添加样式。
• heading：在 ReactStrap Media Component 中，heading 是 reactStrap 中的属性，用于设置文本中的标题。它采用布尔值作为默认参数。
• middle ：在 reactStrap 中，middle 属性用于设置两个对象的中间对齐。它需要一个布尔值。
• 流体：在 ReactStrap 媒体组件中，流体应用 .container-fluid 类，如果是字符串，则应用 .container-{breakpoint} 类。
• 块：在 ReactStrap 媒体组件中，块道具用于指示块是否应该具有块样式。
• color： reactStrap 中的颜色道具用于设置组件中元素的颜色。
• 身体：身体 媒体组件中的属性用于设置元素的主体。默认情况下，它采用布尔值。
• bottom：底部属性用于固定在组件底部的位置。它应该是 true 或 false，它需要一个布尔值。
• 孩子：孩子 属性用于设置组件中元素的子项。它需要一个节点值。
• 标题：标题属性用于设置元素的标题，默认为布尔值。
• left： left属性用于 设置组件左侧元素的对齐方式，它需要一个布尔值。

  Content

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

• 第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd foldername

• 第 3 步：在给定目录中安装 Reactstrap。

npm install --save reactstrap react react-dom

• 第 4 步：导入要在项目中使用的元素。

import {Media} from 'reactstrap'

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

项目结构：

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

npm start

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

App.js

import React from "react";
import { Media } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
    return (
        

            
                
                    
                
                
                    


                    GFG DSA Course
                    


                    I Want to learn DSA but don't know where 
                    to start? Don't worry, this course is a 
                    complete package for you to learn all the 
                    concepts at your own pace. It's perfect 
                    for students and working professionals
                    who know at least anyone coding language.
                
            
        
    );
}

输出：

示例 2：在本示例中，我们将了解如何在媒体中使用标签属性。

• 应用程序.js

Javascript

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

            

            
                
                    
                        GeeksforGeeks
                    
                    Reactstrap is a bootstrap based 
                    react UI library that is used to
                    make good looking webpages with 
                    its seamless and easy to use 
                    component.
                
            
        
    );
}
  
export default gfg;

输出：

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