react子组件向父组件传参
在React中,子组件向父组件传参(或称为“通信”)通常通过事件回调的方式实现。父组件向子组件传递一个函数作为props,子组件在需要时调用这个函数,并可以通过参数的形式向父组件传递数据。
下面是一个简单的例子来说明这个过程:
父组件(ParentComponent)
import React, { useState } from 'react';
import ChildComponent from './ChildComponent'; function ParentComponent() { const [childData, setChildData] = useState(''); // 这是一个由父组件传递给子组件的函数,用于接收子组件的数据 const handleChildData = (data) => { setChildData(data); }; return ( <div> <h1>Parent Component</h1> <p>Data from Child: {childData}</p> <ChildComponent onReceiveData={handleChildData} /> </div> );
} export default ParentComponent;
子组件(ChildComponent)
import React from 'react'; function ChildComponent({ onReceiveData }) { // 假设这里有一个按钮,点击时会触发数据传递 const sendDataToParent = () => { const dataToSend = 'Hello from Child!'; onReceiveData(dataToSend); // 调用父组件传递的函数,并传递数据 }; return ( <div> <h2>Child Component</h2> <button onClick={sendDataToParent}>Send Data to Parent</button> </div> );
} export default ChildComponent;
在这个例子中,ParentComponent
通过props向ChildComponent
传递了一个名为onReceiveData
的函数。这个函数在ParentComponent
中被定义,用于更新ParentComponent
的state(即childData
)。当ChildComponent
中的按钮被点击时,它会调用onReceiveData
函数,并传递一个字符串'Hello from Child!'
作为参数。这样,ParentComponent
就能够接收到来自ChildComponent
的数据,并更新其状态,从而在UI上反映出这一变化。
这种方式是React中实现组件间通信的一种常用且有效的方式,特别适用于父子组件之间的数据传递。