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选择没有colspan属性的td的代码
Jul 06 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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函数(ignore_user_abort)
2012/08/01 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php二维码生成
2015/10/19 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
DOM事件探秘篇
2017/02/15 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Python判断有效的数独算法示例
2019/02/23 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
迪奥官网:Dior.com
2018/12/04 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
房地产出纳岗位职责
2013/12/01 职场文书
上课说话检讨书大全
2014/01/22 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python