React 中 父子组件之间的通信
时间: 2023-09-11 20:04:21 浏览: 54
在React中,父子组件之间的通信可以通过props和回调函数来实现。
1. 使用props进行数据传递
父组件可以通过props将数据传递给子组件,子组件通过props接收数据,从而实现通信。例如:
```jsx
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello, child!'
};
}
render() {
return (
<Child message={this.state.message} />
);
}
}
class Child extends React.Component {
render() {
return (
<div>{this.props.message}</div>
);
}
}
```
2. 使用回调函数进行通信
子组件可以通过回调函数将数据传递给父组件,从而实现通信。例如:
```jsx
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
};
}
handleMessage = (message) => {
this.setState({ message });
}
render() {
return (
<div>
<Child onMessage={this.handleMessage} />
<div>Message from child: {this.state.message}</div>
</div>
);
}
}
class Child extends React.Component {
handleClick = () => {
this.props.onMessage('Hello, parent!');
}
render() {
return (
<button onClick={this.handleClick}>Send message</button>
);
}
}
```
这里,子组件Child通过调用父组件传递过来的回调函数onMessage,将数据传递给父组件。父组件通过传递给子组件一个回调函数,实现了子组件向父组件传递数据的目的。