【react】父子组件之间通讯props

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

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

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

父组件

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

父组件的render函数中利用此种形式传递给子组件

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

import React from'react';

import Footer from'./footer.js'

import Table from'./table.js'

classpagedemoextendsReact.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>
      </div>

);
}}
exportdefaultpagedemo;

子组件(table.js)

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


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.Typescript中的&理解 参数中的 & 表示props对象同时拥有了TagManagementState...
    Lethe35阅读 12,255评论 0 1
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,696评论 1 33
  • 很长时间没有敲日记了,我自己也不知道是因为时间不足,还是因为自己懒了,额,懒还是主要的原因的我想,昨天和室友说了一...
    生火DY阅读 1,369评论 0 0
  • 最近在得到上面199软妹币买了吴军的《谷歌方法论》,竟然有点相见恨晚的感觉。 我这个人这么多年来在自我投资上是只铁...
    Bruce_b824阅读 1,112评论 0 0
  • 昨日4/1愚人節,卻讓我聽到一位前輩所分享他年輕時,在德國人手下做事,從德國老闆手中學到的智慧。此愚人節愚的可愛啊...
    繁花似錦微笑以對阅读 1,639评论 0 2

友情链接更多精彩内容