如何在 React 中将数据从子级传递给父级

React 面试中的一个常见问题。

Photo by 费伦茨·阿尔马西 on 不飞溅

在 React 中需要注意的不太熟悉的细微差别之一是它遵循一种数据绑定方式。换句话说，在 React 的情况下，数据只有一种方式从父组件流向子组件。与此相反，即将数据从孩子传递给父母是不可能的，至少在理论上是不可能的。

数据可以通过 props 从父组件传递到子组件。父组件的任何属性，无论是变量还是函数，都可以作为 props 传递给子组件。虽然没有直接的方法将数据从子组件传递到父组件，但有一些变通方法。最常见的一种是将处理函数从父组件传递给子组件，该子组件接受一个参数，该参数是来自子组件的数据。这可以通过一个例子更好地说明。

 从“反应”导入反应； 导出默认函数 App() { 返回 （ <div> <Parent /> </div> ); }

考虑一个简单的应用程序 应用程序 如上所示的组件。它返回一个 家长 div 元素中的组件。让我们看看 家长 和 孩子 成分。

 常量父 = () => {  
 const [message, setMessage] = React.useState("Hello World"); 常量选择消息 = (消息) => {  
 设置消息（消息）；  
 }; 返回 （  
 <div>  
 <h1>{信息}</h1>  
 <Child chooseMessage={chooseMessage} />  
 </div>  
 ); }; const Child = ({ chooseMessage }) => {  
 让味精='再见';  
 返回 （  
 <div>  
 <button onClick={() =>选择消息(msg)}>更改消息</button>  
 </div>  
 ); };

初始状态 信息 中的变量 家长 组件设置为“Hello World”，并显示在 家长 如图所示。我们写一个 选择留言 中的功能 家长 组件并将此函数作为道具传递给 孩子 零件。这个函数接受一个参数 信息 .但是这方面的数据 信息 参数是从内部传递的 孩子 如图所示。所以，点击更改消息按钮， 味精 =“再见”现在将传递给 选择留言 处理函数在 家长 组件和新值 信息 在里面 家长 组件现在将是“再见”。这样，来自子组件的数据（变量中的数据 味精 在 孩子 组件）被传递给父组件。

这是一个简单且相当基本的示例，说明了如何将数据从子组件传递到父组件。知道这一点会很方便，因为您可能会遇到具有多个组件级别的 React 项目，其中父组件可能依赖/期望来自子组件的数据。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/22214/06400709