ReactJS |组件–第2组-yiteyi-C++库

在我们上一篇关于 ReactJS |组件我们必须讨论组件、组件的类型以及如何渲染组件。在本文中，我们将看到组件的更多属性。

null

组成部分： 还记得我们在上一篇文章中的第一个例子吗？我们用它来解释Geeksforgeks的主页组件？让我们回忆一下我们说过的话，“我们可以合并所有这些单独的组件，形成一个父组件”。这就是我们所说的组合组件。现在，我们将创建名为 导航栏 , 侧边栏 , 文章列表 并合并它们以创建一个名为 应用程序 然后呈现这个应用程序组件。下面是索引中的代码。js文件解释了如何做到这一点：

文件名-应用程序。js:

javascript

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

输出：

图片[1]-ReactJS |组件–第2组-yiteyi-C++库

你可以在上面的输出中看到，一切都很好，我们成功地将所有组件合并到一个组件应用程序中。

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

文件名-应用程序。js:

javascript

                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
            
                           const Form=()=>                         
                           {                         
                                                     return                                        (                         
                                                     <div>                         
                                                     <input type =                                        "text"                                        placeholder =                                        "Enter Text.."                                        />                         
                                                     <br />                         
                                                     <br />                         
                                                     <input type =                                        "text"                                        placeholder =                                        "Enter Text.."                                        />                         
                                                     <br />                         
                                                     <br />                         
                                                     <button type =                                        "submit"                                        >Submit</button>                         
                                                     </div>                         
                                                     );                         
                           }                         
            
                           ReactDOM.render(                         
                                                     <Form />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

输出：

图片[2]-ReactJS |组件–第2组-yiteyi-C++库

上面的代码可以很好地创建表单。但是现在我们需要一个有三个输入字段的其他表单。要做到这一点，我们现在必须再次编写包含三个输入字段的完整代码。但是，如果我们将表单组件分解为两个较小的组件，一个用于输入字段，另一个用于按钮，该怎么办？这本可以在很大程度上提高代码的可重用性。这就是为什么建议将组件分解为尽可能小的单元，然后合并它们来创建父组件，以提高代码模块化和可重用性。在下面的代码中，组件窗体被分解为更小的组件输入和按钮。

文件名-应用程序。js:

javascript

                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
            
                           // Input field component                         
                           const Input=()=>                         
                           {                         
                                                     return                                        (                         
                                                     <div>                         
                                                     <input type=                                        "text"                                        placeholder=                                        "Enter Text.."                                        />                         
                                                     <br />                         
                                                     <br />                         
                                                     </div>                         
                                                     );                         
                           }                         
            
                           // Button Component                         
                           const Button=()=>                         
                           {                         
                                                     return                                        <button type =                                        "submit"                                        >Submit</button>;                         
                           }                         
            
                           // Form component                         
                           const Form=()=>                         
                           {                         
                                                     return                                        (                         
                                                     <div>                         
                                                     <Input />                         
                                                     <Input />                         
                                                     <Button />                         
                                                     </div>                         
                                                     );                         
                           }                         
            
                           ReactDOM.render(                         
                                                     <Form />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

输出：

图片[3]-ReactJS |组件–第2组-yiteyi-C++库

到目前为止，我们只使用静态数据的组件。也就是说，我们直接在组件内部写入数据。如果我们想把一些数据传递给我们的组件呢？React允许我们在另一个名为道具 .我们将了解道具我们将在下一篇文章中详细介绍。

文章版权归作者所有，未经允许请勿转载。

THE END

技术文章