如何在React组件中实现⽗⼦组件之间的通信？

在React中，⽗⼦组件之间的通信通常通过props（属性）和回调函数来实现。以下是具体的实现⽅式：

⽗组件向⼦组件传递数据（通过props）

在⽗组件中，你可以通过向⼦组件传递props来发送数据。⼦组件通过 this.props （在类组件中）

或函数参数（在函数组件中，通过解构赋值）来访问这些数据。

类组件⽰例

class ParentComponent extends React.Component {
render() {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
}
}

class ChildComponent extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}

函数组件⽰例（使⽤解构赋值）：

function ParentComponent() {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
}

function ChildComponent({ message }) {
return <div>{message}</div>;
}

子组件向父组件发送数据（通过回调函数）

⼦组件通常通过传递回调函数作为props给⼦组件，然后在⼦组件中调⽤这个回调函数来发送数据。

类组件⽰例：

 class ParentComponent extends React.Component {
handleData = (data) => {
console.log(data); // 处理来⾃⼦组件的数据
}

render() {
return <ChildComponent onData={this.handleData} />;
}
}
class ChildComponent extends React.Component {
handleClick = () => {
const data = "Hello from Child";
this.props.onData(data); // 调⽤⽗组件传递的回调函数并发送数据
}

render() {
return <button onClick={this.handleClick}>Send Data</button>;
}
}

函数组件⽰例（使⽤Hooks）：

function ParentComponent() {
const handleData = (data) => {
console.log(data); // 处理来⾃⼦组件的数据
}

return <ChildComponent onData={handleData} />;
}

function ChildComponent({ onData }) {
const handleClick = () => {
const data = "Hello from Child";
onData(data); // 调⽤⽗组件传递的回调函数并发送数据
}

return <button onClick={handleClick}>Send Data</button>;
}

以上就是在React中实现⽗⼦组件之间通信的基本⽅式。当然，对于更复杂的组件结构，你可能还需要使⽤到如Redux、MobX等状态管理库，或者使⽤React的Context API来实现跨组件通信。

更多前端面试题 需要的同学转发本文+关注+【点击此处】即可获取！加油复习