react 父子组件之间通讯props
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了react 父子组件之间通讯props,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1756字,纯文字阅读大概需要3分钟。
内容图文
![react 父子组件之间通讯props](/upload/InfoBanner/zyjiaocheng/336/0f777c2a91c847f69c9fa7214cb88cc5.jpg)
实现父子组件双向数据流整体的思路是:
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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的react 父子组件之间通讯props全部内容,希望文章能够帮你解决react 父子组件之间通讯props所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。