react父子组件之间的传值

1. 父向子传递

在父组件中：对子组件这样写：

<ZiZuJian   content={item} />

在子组件的文件里这样写：

import React, { Component } from 'react'; //imrc
class ZiZuJian  extends Component { //cc
   
    render() { 
        return ( 
            <div>{this.props.content}</div>
         );
    }
}
 
export default XiaojiejieItem;

• 注意，父组件向子组件传值，靠属性的形式传递

2 .子向父传递

和VUE一样，子组件向父组件传递需要点击动作

• 代码的整体就是父组件将index和自己的方法都传递给了子组件，点击时。子组件将index通过使用父组件传递过来的方法，进行操作

但是React有明确规定，子组件时不能操作父组件里的数据的，所以需要借助一个父组件的方法，来修改父组件的内容。其实在以前已经写了一个删除方法deleteItem，现在要作的就是子组件调用这个方法。

• 如何通过点击子组件，来达到删除父组件的效果呢？
  通过点击要删除的项，然后拿到要删除的项的索引，通过父组件传递过来的索引和方法，来达到删除的目的所以现在先在子组件上绑定点击事件，

• 子组件

import  React  ,{component} from 'react'
class ZiZuJian extends Component { 
      render(){
          return(
           <div  onClick={this.handleClick.bind(this)> {this.props.content} </div>)
   }
        handleClick(){
              // this.props.index  是传递过来的索引（props后面写的是父组件的传递过来的前面写的key）
             // this.props.deteleItem 是传递过来的方法（props后面写的是父组件的传递过来时，前面写的方法）
               this.props.deleteItem(this.props.index)
}

}
export  default   ZiZuJian ;

在父组件中，把要传递的索引和父组件的方法传递过来，传递给子组件

<ul>{
       this.state.list.map((item,index) =>{
                       retrun (
                              <ZiZuJian   key={index+item}
                                   content={item}
                                   index={index} 
                                   deteleItem={this.deteleItem.bind(this)} //该处是父组件的方法
                                 />
                               )
                           }
  }</ul>