如何在 ReactJS 中将数据从一个组件传递到另一个组件？

在本文中，我们将了解如何将数据从一个组件传递到另一个组件。我们有多种方式在组件之间传递数据。我们可以将数据从父母传递给孩子，从孩子传递给父母，以及在兄弟姐妹之间传递。所以现在让我们看看我们该怎么做。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序。

  npx create-react-app myapp

• 第 2 步：创建项目文件夹后，即 myapp，使用以下命令移动到该文件夹。

  cd myapp

项目结构：它将如下所示。我们创建了两个名为Child.js和Parent.js的组件，如下所示。

如上图所示，我们创建了两个名为Child.js和Parent.js的组件。

将数据从父级传递给子级：

为了将数据从父组件传递到子组件，我们使用道具。 props 数据由父组件发送，子组件不能更改，因为它们是只读的。

示例：以下示例介绍了如何在 ReactJS 中将数据从父组件传递到子组件。

Parent.js

import React from 'react'
import Child from './Child';
  
const Parent = () => {
const data = "Hello Everyone";
    return(
        

          
        
    );
}
  
export default Parent;

Child.js

import React from 'react';
  
const Child = (props) => {
    return(
      
 {props.data} 
    );
}
  
export default Child;

应用程序.js

import React from 'react';
import "./index.css";
import Parent from './Parent'
  
const App = () => {
  return (
    

      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

将数据从子组件传递到父组件：

为了将数据从子组件传递给父组件，我们必须在父组件中创建一个回调函数，然后将回调函数作为道具传递给子组件。此回调函数将从子组件中检索数据。子组件使用 props 调用父回调函数，并将数据传递给父组件。

示例：以下示例介绍了如何在 ReactJS 中将数据从子组件传递到父组件。

父.js

import React from 'react';
import Child from './Child'
  
class Parent extends React.Component{    
    state = {
        msg: "",
    }
  
    handleCallback = (childData) =>{
        this.setState({msg: childData})
    }
  
    render() {
        const {msg} = this.state;
        return(
           

             
 {msg}
                 
           
        );
    }
}
  
export default Parent;

Child.js

import React from "react";
  
class Child extends React.Component {
    onTrigger = () => {
      this.props.parentCallback("Welcome to GFG");
    };
  
    render() {
      return (
        

          

 


          Click me
        
      );
    }
}
  
export default Child;

应用程序.js

import React from 'react';
import "./index.css";
import Parent from './Parent';
  
const App =() => {
  return (
    

      
    
  );
}
  
export default App;

输出：

在兄弟姐妹之间传递数据：

对于在兄弟姐妹之间传递数据，我们可以选择多种方法，如下所示：

1. 结合以上两种方式（回调和props的使用）。
2. 使用 Redux。
3. 上下文API

示例：在此示例中，我们使用 ContextAPI 在兄弟姐妹之间传递数据。因此，我们为此有一个不同的项目。

项目结构：它将如下所示。我们创建了两个名为Child1.js和Child2.js的组件，如下所示。

Child1.js

import React, {createContext} from "react";
import Child2 from './Child2';
  
const Name = createContext();
  
const Child1 = () => {
    return (
      <>
        
        
        
      
    );
}
  
export default Child1;
export {Name};

Child2.js

import React from "react";
import { Name } from "./Child1";
  
const Child2 = () => {
    return (
      <>
        
          {(fname) => {
            return 
My Name is {fname}
;
          }}
        
      
    );
};
  
export default Child2;

应用程序.js

import React from 'react';
import "./index.css";
import Child1 from './Child1';
  
const App =() => {
  return (
    

      
    
  );
}
  
export default App;

输出：