美文网首页
react父子组件之间的传值

react父子组件之间的传值

作者: 我爱阿桑 | 来源:发表于2019-09-28 15:37 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:react父子组件之间的传值

          本文链接:https://www.haomeiwen.com/subject/agnyuctx.html