ReactJS 语义 UI 参考插件

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

在本文中，我们将学习如何在 ReactJS Semantic UI 中使用 Ref Addons。 Ref Addons 用于制作功能组件和类组件。我们可以通过 useRef 方法使用 innerRef 属性

财产：

Forward Ref：它使用 forwardRef 方法，允许父组件将 ref 传递给它的子组件。
inner Ref： Ref Addons 中的inner Ref 属性用于类内组件和功能组件，并返回DOM 节点。
文本区域：该属性用作默认文本区域，用于覆盖表单组件。文本区域用于用户输入输入字段。
Menu： Menu 是语义 UI 中的一个属性，用于在用户导航元素时显示操作。内容道具中菜单的主要用途。

句法：

Children content

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

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

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

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

App.js

import React from "react";
import { Grid, Ref, Segment } from "semantic-ui-react";
   
function RefExampleRef() {
  const objectRef = React.useRef(null);
   
  return (
    
      
        
          
            
              Semantic UI Ref Element
            
          
          
            
              A Ref Node 
            
   
            
              
                Semantic UI is a modern framework 
                used in developing seamless
                designs for the website. It gives 
                the user a lightweight experience 
                with its components. It uses 
                predefined CSS and JQuery to 
                incorporate different frameworks.
              
            
          
        
      
    
  );
}
   
export default RefExampleRef;

index.css

#gfg {
    margin: 40px;
}

索引.css

#gfg {
    margin: 40px;
}

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

npm start

输出：

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