react 父子组件之间通讯props


Posted in Javascript onSeptember 08, 2018

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

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;

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

Javascript 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 #Javascript
vue弹窗插件实战代码
Sep 08 #Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 #Javascript
详解Webpack-dev-server的proxy用法
Sep 08 #Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 #Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 #Javascript
You might like
一个程序下载的管理程序(三)
2006/10/09 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
解析yii数据库的增删查改
2013/06/20 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP实现事件机制的方法
2015/07/10 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
javascript 寻找错误方法整理
2014/06/15 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
解决python3输入的坑——input()
2020/12/05 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
租赁意向书范本
2014/04/01 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
外出考察学习心得体会
2016/01/18 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
Java设计模式之代理模式
2022/04/22 Java/Android