和 Vue 相同，React 中也有父子组件的概念，在 React 中父子组件的通信：
父组件向子组件发送消息
父组件通过引用子组件时通过属性的方式向子组件传递数据，子组件中有一个属性 props — 存储父组件传递的数据。
// 父组件
// 1. 引入子组件
import SubComponent from './subComponent';
// 2. 引用子组件
render() {
return (
<SubComponent content={this.state.content} />
);
}
// 子组件
render() {
return (
<div>{this.props.content}</div>
);
}
子组件和父组件通信
子组件如果想和父组件进行通信，需要调用父组件传递过来的方法。
// 父组件
// 1. 引入子组件
import SubComponent from './subComponent';
handleDelete(index) {
console.log(index);
}
// 2. 引用子组件，传递给子组件方法
render() {
return (
<SubComponent
delete={this.handleDelete.bind(this)}
content={this.state.content}
index={this.state.index} />
);
}
// 子组件
handleDelete() {
// 调用父组件传递过来的方法
this.props.delete(this.props.index);
}
render() {
return (
<div onClick={this.handleDelete.bind(this)}>{this.props.content}</div>
);
}
