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

一、父组件给子组件传值

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

父组件的实现步骤如下：

例如：

• 父组件：

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

• 子组件：

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

二、子组件传值给父组件

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

步骤：

例如：

• 父组件：

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/