当前位置: 首页 > 后端技术 > Node.js

React组件之间的信息交换和数据传递图解

时间:2023-04-03 19:00:11 Node.js

React组件之间的通信方式可以分为以下三种:[父组件]传值给[子组件];b[子组件]传值给[父组件];无任何嵌套关系的c组件之间传值(PS:例如:兄弟组件之间传值)1.父组件向子组件传递信息更简单直观//父组件varMyContainer=React.createClass({getInitialState:function(){return{checked:true};},render:function(){return();}});//子组件varToggleButton=React.createClass({render:function(){//从【父组件】获取的值varchecked=this.props.checked,text=this.props.text;return();}});2子组件向父组件传递信息。子组件需要控制自己的状态,然后告诉父组件自己的状态,通过props调用父组件控制状态函数,在父组件中显示子组件的状态变化。//子组件varChild=React.createClass({render:function(){return(

Pleaseenteryouremailaddress:
)}});//父组件,其中子组件的值是通??过event.target.valuevarParen获取的t=React.createClass({getInitialState:function(){return{email:''}},handleEmail:function(event){this.setState({email:event.target.value});},render:function(){return(
用户邮箱:{this.state.email}
)}});React.render(,document.getElementById('test'));3.兄弟组件传信息我们可以给两个兄弟一个共同的父亲,然后结合上面两种方法,让老大把信息传给父亲(孩子传给父亲),再把父亲的信息传给老二child实现通信(父子)这里只写父组件代码,实现input到list的数据传递classCommentAppextendsComponent{constructor(){super()this.state={arry:[]}}getDate(obj){this.state.arry.push(obj)this.setState({arry:this.state.arry})console.log(this.state.arry)}render(){return(
)}}