美文网首页
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>

相关文章

  • 组件之间的传值

    组件之间的传值,包括父子组件传值,兄弟组件之间的传值,其中父子组件包括父组件向子组件传值和子组件向父组件传值,现在...

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值:可以使用$emit/props...

  • react-父子组件间通信

    React-父子组件间通信 父组件传 值 给子组件, 传 方法 给子组件 子组件接收 值 ,触发父组件的 方法

  • 22.父子组件之间传值示例

    1.父子组件之间传值:

  • Vue组件之间的传值

    Vue父子组件之间的传值(props)兄弟组件 VUEX

  • Vue父子组件通信和双向绑定

    本篇文章主要介绍父子组件传值,组件的数据双向绑定。 1. 基础父子组件传值 父子组件传值,这是Vue组件传值最常见...

  • react父子组件之间的传值

    1. 父向子传递 在父组件中:对子组件这样写: 在子组件的文件里这样写: 注意,父组件向子组件传值,靠属性的形式传...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • React入门(二)组件

    本节知识点 (1)React组件化 (2)React父子组件传值 (一)组件 在React中组件都是对应的一个个类...

  • vue--三种组件中之间的传值

    一、父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit 1...

网友评论

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

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