react 父子组件如何通信
父子组件通信方法
父组件向子组件传递数据
父组件通过props向子组件传递数据。子组件通过this.props（类组件）或直接通过参数（函数组件）接收数据。
父组件示例：
<ChildComponent message="Hello from Parent" />子组件示例（函数组件）：
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件示例（类组件）：
class ChildComponent extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}子组件向父组件传递数据
父组件通过props向子组件传递一个回调函数，子组件调用该函数将数据传递回父组件。
父组件示例：
function ParentComponent() {
const handleData = (data) => {
console.log("Data from child:", data);
};
return <ChildComponent onData={handleData} />;
}子组件示例：
function ChildComponent({ onData }) {
const sendData = () => {
onData("Hello from Child");
};
return <button onClick={sendData}>Send Data</button>;
}使用Context跨层级通信
适用于深层嵌套组件通信。通过React.createContext创建上下文，父组件提供数据，子组件通过useContext或Context.Consumer获取数据。
创建Context：
const MyContext = React.createContext();父组件提供数据：
<MyContext.Provider value={{ data: "Shared Data" }}>
<ChildComponent />
</MyContext.Provider>子组件消费数据（函数组件）：
function ChildComponent() {
const context = React.useContext(MyContext);
return <div>{context.data}</div>;
}使用Ref直接调用子组件方法
父组件通过ref获取子组件实例，直接调用子组件方法。适用于类组件。
父组件示例：
class ParentComponent extends React.Component {
childRef = React.createRef();
handleClick = () => {
this.childRef.current.childMethod();
};
render() {
return (
<>
<ChildComponent ref={this.childRef} />
<button onClick={this.handleClick}>Call Child Method</button>
</>
);
}
}子组件示例：
class ChildComponent extends React.Component {
childMethod = () => {
console.log("Child method called");
};
render() {
return <div>Child Component</div>;
}
}通过事件总线或状态管理库
对于复杂场景，可以使用事件总线（如EventEmitter）或状态管理工具（如Redux、MobX）实现通信，但通常建议优先使用React内置机制。
