如何将属性从父组件 props 传递给子组件？

在本文中，我们将学习如何在 React js 中将属性从父组件传递给子组件。在 React 中将子组件嵌入到父组件中时，开发人员需要从父组件向子组件发送属性或数据。

React.js 允许我们使用 props（属性的缩写形式）将数据从父组件传递到子组件。我们必须在子组件中设置 props 值，同时将其嵌入到父组件中。

先决条件：本教程的先决条件是：

• 反应知识
• 类组件
• 功能组件

创建应用程序：以下命令将帮助您启动一个新的反应应用程序。

npx create-react-app testapp

接下来，您必须从终端移动到“ testapp ”项目文件夹。

cd testapp

在src文件夹中创建一个新的components文件夹，并在组件文件夹中创建一个名为child.js的组件。

项目目录：应该是这个样子。

使用类组件将属性从父组件传递到子组件

当用户使用类组件将数据从父组件传递给子组件时，他们可以使用“ this.props.property_name ”访问子组件内部。

脚步：

1. 将子组件嵌入到父组件中。
2. 将具有赋值的数据变量（props）作为参数传递给子组件，同时将其嵌入到父组件中。
3. 如果用户想要传递多个数据变量（props），所有变量名都应该是唯一的。
4. 在子组件中，使用“this.props.variable_name”访问数据变量值。

例子：

文件名：App.js在这个文件中，我们将子组件嵌入到父组件中。此外，我们将多个道具传递给子组件。

Javascript

import React, { Component } from 'react';
import Child from './components/child.js';
 
// Child component embedded to parent component
// with props value
class App extends Component {
  render() {
    return (
      

        
This is a parent component
        

         

          
         
        
      
    );
  }
}
  
export default App;

文件名：Child.js在 child.js 文件中，我们将从父组件访问 props 并在子组件中渲染它们。

Javascript

import React, { Component } from 'react';
 
// Accessing the props value using this.props
class Child extends Component {
  render() {
    return (
      

        
This is a child component
        

          GeeksForGeeks
        
        

          hello user
        
 
      
    );
  }
}
  
export default Child;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：

在上面的输出图像中，用户可以看到 HTML 元素的颜色是根据 props 值改变的。

使用功能组件将属性从父组件传递到子组件

要使用功能组件从父级到子级访问属性，用户不需要像类组件那样使用“ this.props ”。用户只能通过编写变量名来访问 props 值。

脚步：

1. 将子组件嵌入到父组件中。
2. 将 props 作为参数传递给子组件，同时将其嵌入到父组件中。
3. 在子组件中，仅通过写入名称或变量来访问数据变量值。

例子：

文件名：App.js在 App.js 中，我们将添加一个功能组件，并使用 props 及其值调用一个子组件。

Javascript

import React, { Component } from 'react';
import Child from './components/child.js';
 
// parent component
// embedding child component inside it
function App (){
  return(
    

    
This is a parent component
    

  
  
  
  )
}

文件名：child.js在 child.js 中，我们将添加 props 作为功能组件的参数，并在组件内部使用它们。

Javascript

import React, { Component } from 'react';
 
// Passing props as a parameter
// inside the child component
function Child ({gfgcolor,usercolor}){
  return(
      

        
This is a child component
        
GeeksForGeeks
        
hello user
 
      
  )
}

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：