前端框架（react+umi+dva+ant design pro ）攻克: 二、react 父子组件通信（二）-白红宇

前端框架（react+umi+dva+ant design pro ）攻克: 二、react 父子组件通信（二）

阅读量：560 次

发布时间：2019-03-09

本文共 1158 字，大约阅读时间需要 3 分钟。

一、父组件给子组件传值

在React应用中，父组件向子组件传递值的方式比较直接。在父组件中，通过定义状态变量或固定的值，可以将其通过props传递给子组件。这是实现组件间通信的基本方式。

父组件的实现步骤如下：

在父组件中准备要传递的值

在父组件的 JSX 中使用 {变量名} 的方式将值传递给子组件

子组件通过 this.props 接收传递过来的值

例如：

父组件：

function ParentComponent() {  const valueToPass = 'Hello from Parent';  return (    
         
        
   
  );}

子组件：

function ChildComponent props ({ valueProp }) {  return (    
         
    接收到的值：{valueProp}
    
   
  );}

二、子组件传值给父组件

当需要子组件反馈数据时，可以通过定义父组件传来的函数来实现。父组件需要提前定义一个函数名，并将这个函数名通过props传递给子组件。子组件在处理完成后，调用父组件定义的函数，将结果传回父组件。

步骤：

父组件定义一个状态变量或函数接收结果

在父组件的 JSX 中将函数名传递给子组件

子组件在完成处理后调用传入的函数，传递结果

例如：

父组件：

function ParentComponent() {  const [result, setResult] = useState(null);  const handleData = (data) => {    setResult(data);    console.log('父组件接收到：', data);  };  return (    
         
        
   
  );}

子组件：

function ChildComponent props ({ handleDataFunction, otherProp }) {  const processResult = () => {    const finalData =-process otherProp;    handleDataFunction(finalData);  };  return (    
         
        
   
  );}

三、总结

父组件传给子组件的值通常是静态内容，直接通过props传递即可。子组件给父组件传值的场景主要用于动态交互，需要在父组件预先定义函数接收回调。理解和掌握这两种方法的区别和适用场景，有助于在项目中更高效地实现组件间的数据传递和状态管理。

转载地址：http://ufrpz.baihongyu.com/

你可能感兴趣的文章