反应JS |组件 – 第 2 组

在我们之前关于 ReactJS 的文章中 |组件我们不得不讨论组件、组件的类型以及如何渲染组件。在本文中，我们将看到组件的更多属性。

组合组件：还记得在我们之前的文章中，我们用来解释组件的 GeeksforGeeks 主页的第一个示例吗？让我们回想一下我们所说的，“我们可以合并所有这些单独的组件来创建一个父组件”。这就是我们所说的组合组件。我们现在将创建名为Navbar 、 Sidebar 、 ArticleList的单个组件并将它们合并以创建一个名为App的父组件，然后渲染这个 App 组件。
index.js 文件中的以下代码解释了如何执行此操作：

文件名 - App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// Navbar Component
const Navbar=()=>
{
    return 
This is Navbar.< /h1>
}
 
// Sidebar Component
const Sidebar=()=> {
    return 
This is Sidebar.
}
 
// Article list Component
const ArticleList=()=>
{
    return 
This is Articles List.
}
 
// App Component
const App=()=>
{
    return(
            

                
                
                
            
        );
}
 
ReactDOM.render(
    ,
    document.getElementById("root")
);

输出：

您可以在上面的输出中看到一切运行良好，并且我们设法将所有组件合并到单个组件 App 中。

分解组件：分解组件意味着将组件分解为更小的组件。当我们开始反复讨论组件时，我们从一开始就已经讲述了如何组合较小的组件来构建父组件。让我们看看为什么需要这样做。假设我们要为 HTML 表单制作一个组件。假设我们的表单将有两个输入字段和一个提交按钮。我们可以创建一个表单组件，如下所示：

文件名 - App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
const Form=()=>
{
    return (
        

            
            

            

            
            

            

            Submit
        
    );
}
 
ReactDOM.render(
    ,
    document.getElementById("root")
);

输出：

上面的代码可以很好地创建一个表单。但是让我们说现在我们需要一些具有三个输入字段的其他表单。为此，我们现在必须再次编写带有三个输入字段的完整代码。但是，如果我们将 Form 组件分解为两个更小的组件，一个用于输入字段，另一个用于按钮呢？这可能在很大程度上提高了我们的代码可重用性。这就是为什么建议 React 将一个组件分解为尽可能小的单元，然后将它们合并以创建一个父组件，以增加代码的模块化和可重用性。在下面的代码中，组件 Form 被分解为更小的组件 Input 和 Button。

文件名 - App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// Input field component
const Input=()=>
{
    return(
        

            
            

            
   
        
    );
}
 
// Button Component
const Button=()=>
{
    return Submit;   
}
 
// Form component
const Form=()=>
{
    return (
        

            
            
                       
        
    );
}
 
ReactDOM.render(
    ,
    document.getElementById("root")
);

输出：

到目前为止，我们只使用了静态数据的组件。也就是说，我们直接在组件内部写入数据。如果我们想将一些数据传递给我们的组件怎么办？ React 允许我们在另一个名为props的属性的帮助下这样做。我们将在下一篇文章中详细了解道具。