1.父传子

//父组件向子组件传值，通过props，将父组件的state传递给了子组件。
/**父组件 */
export default class Parent extends Component {
  constructor(props){
    super(props)
    this.state={
      message:"中秋节快乐呀"
    }
  }
  render(){
    return(
          <Child txt={this.state.message}/>
    )
  }
}

 /**子组件 */
export default class Child extends Component {
    // 默认的props 可写可不写
    render(){
        return(
              <p>{this.props.txt}</p>
        )
    }
}

//父组件向子组件传值，通过props，将父组件的state传递给了子组件。
/**父组件 */
export default class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 数组中的值
      list: ['vue', 'angular', 'react']
    }
  }
  render() {
    return(
      //React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
      //key 是唯一可以传递给 Fragment 的属性。
      <Fragment>
        <ul>
          {
            this.state.list.map((v, k) => {
              return (
                <div key={ k }>
                  {/* 通过content={item} 将数据传给子组件 
                    通过deleteItme将父组件的方法传给子组件
                    将父组件的this，传递给子组件
                */}
                  <Child content={v} index={k} deleteItme={this.handleDelete.bind(this)}/>
                </div>
              )
           
            })
          }
        </ul>
      </Fragment>
    )
  }
  // 删除事件
  handleDelete(index) {
    let list = [...this.state.list]
    list.splice(index, 1)
    //1. 不希望直接修改state里面的数据 故先拷贝出来
    //2. splice 删除后返回的是被删除的项，并改变原数组
    this.setState({
      list: list
    })
  }
}

 /**子组件 */
export default class Child extends Component {
    render() {
        // this.props.content 接受父组件传递过来的信息
        return <div onClick={this.handleClick.bind(this)}>{ this.props.content }</div>
      }
      
      handleClick() {
        // 调用父组件的方法 并把对应的索引传给父组件
        this.props.deleteItme(this.props.index)
        debugger
      }
}