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 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
Vue精简版风格概述
Jan 30 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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
PHP的PSR规范中文版
2013/09/28 PHP
php+highchats生成动态统计图
2014/05/21 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python递归函数实例讲解
2019/02/27 Python
python 为什么说eval要慎用
2019/03/26 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
解决方案设计综合面试题
2015/08/31 面试题
护士自我鉴定
2013/10/23 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python