ReactJS |道具-第1组-yiteyi-C++库

我们在之前的文章中已经讨论了组件及其类型 ReactJS |组件 .到目前为止，我们只使用静态数据处理组件。在本文中，我们将了解如何将信息传递给组件。 React允许我们使用一种叫做道具（代表财产）。道具基本上是一种全局变量或对象。我们将在本文中详细了解这些。

null

传递和接近道具

在为任何HTML标记声明属性时，我们可以向任何组件传递道具。请看下面的代码片段：

<DemoComponent sampleProp = "HelloProp" />

在上面的代码片段中，我们传递了一个道具命名的 样品柱 到名为 人口构成 .此道具的值为“HelloProp”。现在让我们看看如何使用这些道具。我们可以从传递道具的组件类访问内部的任何道具。道具可访问，如下所示：

this.props.propName;

我们可以使用上述语法从组件类内部访问任何道具。“这是我的错。”。道具是一种全局对象，存储道具的所有组件。这个 propName ，即道具的名称是该对象的键。下面是一个示例程序，演示如何从组件传递和访问道具：

打开react项目并编辑 应用程序。js src文件夹中的文件：

src应用程序。js:

javascript

                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
            
                           // sample component to illustrate props                         
                           class DemoComponent extends React.Component{                         
                                                     render(){                         
                                                     return                                        (                         
            
                                                     <div>                         
                                                     {                                        /*accessing information from props */                                        }                         
                                                     <h2>Hello {                                        this                                        .props.user}</h2>                         
                                                     <h3>Welcome to GeeksforGeeks</h3>                         
                                                     </div>                         
                                                     );                         
                                                     }                         
                           }                         
            
                           ReactDOM.render(                         
                                                     // passing props                         
                                                     <DemoComponent user =                                        "Harsh Agarwal"                                        />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

输出：

图片[1]-ReactJS |道具-第1组-yiteyi-C++库

在上面的例子中，我们使用了一个基于类的组件来演示道具。但我们可以 将道具传递给基于功能的组件 就像我们在上面的例子中做的一样。但要从函数中访问道具，我们不再需要使用“this”关键字。功能组件接受道具作为参数，可以直接访问。下面是与上面相同的示例，但这次使用的是基于函数的组件，而不是基于类的组件。

打开react项目并编辑 应用程序。js src文件夹中的文件：

src应用程序。js:

javascript

                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
            
                           // functional component to illustrate props                         
                           function                                        DemoComponent(props){                         
                                                     return                                        (                         
                                                     <div>                         
                                                     {                                        /*accessing information from props */                                        }                         
                                                     <h2>Hello {props.user}</h2>                         
                                                     <h3>Welcome to GeeksforGeeks</h3>                         
                                                     </div>                         
                                                     );                         
                           }                         
            
                           ReactDOM.render(                         
                                                     // passing props                         
                                                     <DemoComponent user =                                        "Harsh Agarwal"                                        />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

该程序的输出将与上述程序的输出相同。唯一的区别是，我们使用了基于函数的组件，而不是基于类的组件。

将信息从一个组件传递到另一个组件

这是React最酷的功能之一。我们可以让组件相互作用。我们将考虑父母和孩子两个组成部分来解释这一点。我们将把一些信息作为道具从父组件传递给子组件。 我们可以将任意多的道具传递给一个组件 . 请看下面的代码：打开react项目并编辑 应用程序。js src文件夹中的文件：

src应用程序。js:

javascript

                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
            
                           // Parent Component                         
                           class Parent extends React.Component{                         
                                                     render(){                         
                                                     return                                        (                         
                                                     <div>                         
                                                     <h2>You are inside Parent Component</h2>                         
                                                     <Child name=                                        "User"                                        userId =                                        "5555"                                        />                         
                                                     </div>                         
                                                     );                         
                                                     }                         
                           }                         
            
                           // Child Component                         
                           class Child extends React.Component{                         
                                                     render(){                         
                                                     return                                        (                         
                                                     <div>                         
                                                     <h2>Hello, {                                        this                                        .props.name}</h2>                         
                                                     <h3>You are inside Child Component</h3>                         
                                                     <h3>Your user id is: {                                        this                                        .props.userId}</h3>                         
                                                     </div>                         
                                                     );                         
                                                     }                         
                           }                         
            
                           ReactDOM.render(                         
                                                     // passing props                         
                                                     <Parent />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

输出：

图片[2]-ReactJS |道具-第1组-yiteyi-C++库

因此，我们在React中看到了道具，还了解了道具的使用方式、如何将它们传递给组件、如何在组件内部访问它们等等。在这个完整的场景中，我们经常使用“this.props.propName”来访问道具。现在，让我们检查一下这个文件中实际存储的内容。我们会安慰你的。在子组件内的上述程序中记录“this.props”，并尝试观察登录到控制台的内容。下面是带有控制台的修改程序。log（）语句：

打开react项目并编辑 应用程序。js src文件夹中的文件：

src应用程序。js:

javascript

                           import React from                                        'react'                                        ;                         
                           import ReactDOM from                                        'react-dom'                                        ;                         
            
                           // Parent Component                         
                           class Parent extends React.Component{                         
                                                     render(){                         
                                                     return                                        (                         
                                                     <div>                         
                                                     <h2>You are inside Parent Component</h2>                         
                                                     <Child name=                                        "User"                                        userId =                                        "5555"                                        />                         
                                                     </div>                         
                                                     );                         
                                                     }                         
                           }                         
            
                           // Child Component                         
                           class Child extends React.Component{                         
                                                     render(){                         
                                                     console.log(                                        this                                        .props);                         
                                                     return                                        (                         
                                                     <div>                         
                                                     <h2>Hello, {                                        this                                        .props.name}</h2>                         
                                                     <h3>You are inside Child Component</h3>                         
                                                     <h3>Your user id is: {                                        this                                        .props.userId}</h3>                         
                                                     </div>                         
                                                     );                         
                                                     }                         
                           }                         
            
                           ReactDOM.render(                         
                                                     // passing props                         
                                                     <Parent />,                         
                                                     document.getElementById(                                        "root"                                        )                         
                           );                         

图片[3]-ReactJS |道具-第1组-yiteyi-C++库

在上图中，您可以清楚地看到，在控制台中 这道具 是一个对象，它包含传递给子组件的所有道具。子组件的道具名称是该对象的键，它们的值是这些键的值。所以，现在很清楚，任何使用道具传送到组件的信息都存储在一个对象中。笔记：道具是只读的。我们不允许修改道具的内容。无论组件的类型是功能性的还是基于类的，它们都不允许修改它们的道具。我们将在下一篇文章中详细了解这一点 Reactjs |道具套装2

参考 : https://reactjs.org/docs/components-and-props.html

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

THE END

技术文章