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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
js css样式操作代码(批量操作)
Oct 09 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
Jquery使用val方法读写value值
May 18 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
vue项目实战总结篇
2018/02/11 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python descriptor(描述符)的实现
2020/11/15 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
党员自我评价分享
2013/12/13 职场文书
军训心得体会
2013/12/31 职场文书
支教自我鉴定
2014/01/18 职场文书
大学生实习介绍信
2015/05/05 职场文书
环保守法证明
2015/06/24 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL