React 学习（二）—— 父子组件

和 Vue 相同，React 中也有父子组件的概念，在 React 中父子组件的通信：

父组件向子组件发送消息

父组件通过引用子组件时通过属性的方式向子组件传递数据，子组件中有一个属性 props — 存储父组件传递的数据。

// 父组件
// 1. 引入子组件
import SubComponent from './subComponent';

// 2. 引用子组件
render() {
  return (
    
  );
}

// 子组件
render() {
  return (
    
{this.props.content}
  );
}

子组件和父组件通信

子组件如果想和父组件进行通信，需要调用父组件传递过来的方法。

// 父组件
// 1. 引入子组件
import SubComponent from './subComponent';

handleDelete(index) {
  console.log(index);
}

// 2. 引用子组件，传递给子组件方法
render() {
  return (
    
  );
}

// 子组件
handleDelete() {
  // 调用父组件传递过来的方法
  this.props.delete(this.props.index);
}

render() {
  return (
    
{this.props.content}
  );
}