ReactJS 语义 UI 门户插件

Semantic UI 是一个现代框架，用于为网站开发无缝设计。它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 JQuery 语言将它们合并到不同的框架中。

在本文中，我们将了解如何在 ReactJS Semantic UI 中使用 Portal Addons。门户插件用于在页面的任何位置呈现它们。

财产：

受控：受控属性用于制作受控门户。受控属性基本上是用来控制React JS中的组件的。
变化：变化属性用于改善元素的质量，如颜色、大小等。变化是冲突的。它们用于修改元素。
content: content is属性用于描述表头、菜单等。 content属性用于扩展元素。
行为：行为是语义UI中的属性，用于设置验证，获取API 请求。

句法：

Children content

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

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。
```
cd foldername
```
第 3 步：在给定目录中安装语义 UI。

npm install semantic-ui-react semantic-ui-css

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

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

npm start

示例 1：这是展示如何使用门户插件的基本示例。

App.js

import React, { Component } from 'react'
import { Button, Grid, Header, Segment, Portal } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
export default class PortalExamplePortal extends Component {
  state = {
      
    open: false,
  }
  
  Open = () => {
    this.setState({ open: true })
      
  }
  
  Close = () => {
    this.setState({ open: false })
      
  }
  
  
  render() {
    const {  open } = this.state
  
    return (
      
      
        
          
            }
            onOpen={this.Open}
            onClose={this.Close}
          >
            
              GeeksforGeeks
              Computer Science Portal              
            
          
        
      
      
    )
  }
}

index.css

#gfg {
  margin: 40px;
}

索引.css

#gfg {
  margin: 40px;
}

输出：

参考： https://react.semantic-ui.com/addons/portal