react 父子组件之间通讯props

实现父子组件双向数据流整体的思路是:

1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数

2,子组件的state发生变化时,在子组件的事件处理函数中,手动触发父函数传递进来的回调函数,同时时将子组件的数据传递回去(有时间研究)

父组件

父组件中定义一个函数,包含一个props的参数,函数内利用super(props)传递给子组件,this.state中用于定义本页面中要用到的以及要传递给子组件的变量。

父组件的render函数中利用<Table list={this.state.list}/>此种形式传递给子组件

(ps:此例子中也包含组件之间的嵌套,同时组件的名称开头字母必须大写,不然会报错)

import React from 'react';
import Footer from './footer.js'
import Table from './table.js'

class pagedemo extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   list: [{
    'id':'1',
    'title':'123',
    'time':'2017',
    'person':'cheny0815',
    'type':'type',
    'operation':'operation'
   },{
    'id':'2',
    'title':'456',
    'time':'2017',
    'person':'cheny0815',
    'type':'type',
    'operation':'operation'
   },{
    'id':'3',
    'title':'789',
    'time':'2017',
    'person':'cheny0815',
    'type':'type',
    'operation':'operation'
   }]
  }
 }
 render() {
  let list = this.state.list;
  return (
   <div className="content">
    <div className="content_main">
      <Table list={list}/> //组件之间的通讯
    </div>
    <Footer /> //组件嵌套
   </div>
  );
 }
}

export default pagedemo;

子组件(table.js)

子组件调用父组个传递过来的参数,并进行传值

import React from 'react';

function table(props) {
 console.log(props);
 return (
  <div className="table_main">
   <table>
     <tbody>
       <tr className="first_tr">
        <td>内容</td>
        <td>发起人</td>
        <td>类型</td>
        <td>时间</td>
        <td>操作</td>
       </tr>
       {
        props.list.map(function(name){ //接受父组件传递过来的值并进行处理
         return (
           <tr key={name.id}>
            <td>{name.title}</td>
            <td>{name.person}</td>
            <td>{name.type}</td>
            <td>{name.time}</td>
            <td>{name.operation}</td>
           </tr>
         )
        })
       }
     </tbody>
   </table>
  </div>
 )
}

export default table;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解React之父子组件传递和其它一些要点

    react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列. React的组件生命周期 react主要思想是构建可复用组件来构建用户界面.在react里面一切皆组件.每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法,分别在哪个阶段执行.下面附上一张React的生命周期图: 组件第一阶段:初始化.渲染以及装载完成: 组件第二阶段:组件运行时候的状态 ①:状态变化引发组件

  • React父子组件间的传值的方法

    父组件向子组件传值: 父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Component{ constructor(props) { super(props); this.state = { txt0:"默认值0", txt1:"默认值1" } } componentDidMount(){ } parToson(){ th

  • react.js 父子组件数据绑定实时通讯的示例代码

    react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <div style={{border:'1px solid red'}}> {this.props.count} </

  • react 父子组件之间通讯props

    实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数 2,子组件的state发生变化时,在子组件的事件处理函数中,手动触发父函数传递进来的回调函数,同时时将子组件的数据传递回去(有时间研究) 父组件 父组件中定义一个函数,包含一个props的参数,函数内利用super(props)传递给子组件,this.state中用于定义本页面中要用到的以及要传递给子组件的变量. 父组件的render函数中利用<Table list={t

  • 关于antd tree 和父子组件之间的传值问题(react 总结)

    项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的table中. 写了三个组件: 现在有个业务场景交互:在orderTree组件中点击树节点,获取当前节点以及所有的父节点的Id 放入一个对象arrKeys中,并在orderForm组件中使用(回填类型下拉选择框,objId对象作为查询接口的入参) 现在可以分部解决问题: 1.首先获取点击的树节点以及所有父节点的id ---arrKeys 2.在点击树节点获取当前节点以及所有父级节点之后,通

  • 关于antd tree和父子组件之间的传值问题(react 总结)

    项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的table中. 写了三个组件: 现在有个业务场景交互:在orderTree组件中点击树节点,获取当前节点以及所有的父节点的Id 放入一个对象arrKeys中,并在orderForm组件中使用(回填类型下拉选择框,objId对象作为查询接口的入参) 现在可以分部解决问题: 1.首先获取点击的树节点以及所有父节点的id ---arrKeys 2.在点击树节点获取当前节点以及所有父级节点之后,通

  • Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因

  • 详解React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二.如何通信 组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递 子组件向父组件传

  • React父子组件传值(组件通信)的实现方法

    目录 1.父组件传值子组件 2.子组件传值父组件 3.兄弟组件传值 1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • vuejs父子组件之间数据交互详解

    父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit自定义事件 export default { name: 'comment', props: ['issue','index'], data () { return { comment: '', } }, components: {}, methods: { removeComment: funct

  • vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    本文实例讲述了vue实现父子组件之间的通信以及兄弟组件的通信功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue父子组件通信.兄弟组件通信</title> <style> *{ margin: 0; padding: 0; l

  • vuejs中父子组件之间通信方法实例详解

    本文实例讲述了vuejs中父子组件之间通信方法.分享给大家供大家参考,具体如下: 一.父组件向子组件传递消息 // Parent.vue <template> <div class="parent"> <v-child :msg="message"></v-child> </div> </template> <script> import VChild from './child.v

随机推荐