反应JS |道具 - 设置 1

我们已经在我们之前关于 ReactJS 的文章中讨论过组件和它的类型 |组件。到目前为止，我们只使用静态数据处理组件。在本文中，我们将了解如何将信息传递给组件。
React 允许我们使用称为props （代表属性）的东西将信息传递给组件。道具基本上是一种全局变量或对象。我们将在本文中详细了解这些内容。

传递和访问道具

当我们为任何 HTML 标签声明属性时，我们可以将 props 传递给任何组件。看看下面的代码片段：

在上面的代码片段中，我们将一个名为sampleProp的prop传递给名为DemoComponent的组件。该道具的值为“HelloProp”。现在让我们看看如何访问这些道具。
我们可以从 props 传递到的组件的类中访问任何内部的 props。可以访问props，如下所示：

this.props.propName;

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

打开你的 react 项目并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// sample component to illustrate props
class DemoComponent extends React.Component{
    render(){
        return(
 
                

                    {/*accessing information from props */}
                    
Hello {this.props.user}
                    
Welcome to GeeksforGeeks
                
            );
    }
}
 
ReactDOM.render(
    // passing props
    ,
    document.getElementById("root")
);

输出：

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

打开你的 react 项目并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// functional component to illustrate props
function DemoComponent(props){
    return(
        

            {/*accessing information from props */}
            
Hello {props.user}
            
Welcome to GeeksforGeeks
         
    );
}
 
ReactDOM.render(
    // passing props
    ,
    document.getElementById("root")
);

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

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

这是 React 最酷的特性之一。我们可以让组件在它们之间进行交互。我们将考虑两个组件 Parent 和 Children 来解释这一点。我们会将一些信息作为 props 从 Parent 组件传递给 Child 组件。我们可以将任意数量的 props 传递给组件。
看下面的代码：
打开你的 react 项目并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// Parent Component
class Parent extends React.Component{
    render(){
        return(
                

                    
You are inside Parent Component
                    
                
            );
    }
}
 
// Child Component
class Child extends React.Component{
    render(){
        return(
                

                    
Hello, {this.props.name}
                    
You are inside Child Component
                    
Your user id is: {this.props.userId}
                
            );
    }
}
 
ReactDOM.render(
    // passing props
    ,
    document.getElementById("root")
);

输出：

所以我们已经看到了 React 中的 props，也了解了如何使用 props，如何将它们传递给组件，如何在组件内部访问它们等等。在这个完整的场景中，我们经常使用“this.props.propName”这个东西来访问道具。现在让我们检查其中实际存储的内容。我们将 console.log “this.props” 在上面的子组件中的程序中，并尝试观察记录到控制台的内容。下面是修改后的带有 console.log() 语句的程序：

打开你的 react 项目并编辑 src 文件夹中的App.js文件：

src App.js：

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
// Parent Component
class Parent extends React.Component{
    render(){
        return(
                

                    
You are inside Parent Component
                    
                
            );
    }
}
 
// Child Component
class Child extends React.Component{
    render(){
        console.log(this.props);
        return(
                

                    
Hello, {this.props.name}
                    
You are inside Child Component
                    
Your user id is: {this.props.userId}
                
            );
    }
}
 
ReactDOM.render(
    // passing props
    ,
    document.getElementById("root")
);

您可以在上图中清楚地看到，在控制台中显示this.props是一个对象，它包含传递给子组件的所有道具。子组件的 props 名称是该对象的键，它们的值是这些键的值。因此，现在很清楚，使用 props 传递到组件的任何信息都存储在对象中。
注意：道具是只读的。我们不允许修改道具的内容。无论 Component 的类型是什么——函数式的还是基于类的，都不允许修改它们的 props。我们将在下一篇文章 Reactjs | 中详细了解这一点。道具组-2

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