React中兄弟组件传值
兄弟组件传值 实际上是间接的通过第三方来实现传值,举例,第一个儿子把值传给父亲,父亲在把这个值传给第二个儿子,这样就实现了兄弟组件传值
来看代码:
父组件代码
1 import React from 'react'; 2 import Son1 from './Son1'; 3 import Son2 from './Son2' 4 class Father extends React.Component{ 5 constructor(){ 6 super(); 7 // 先给message一个空值 8 this.state={ 9 message:'' 10 } 11 } 12 // 声明一个方法用来接收Son1传来的值 13 message(msg){ 14 this.setState({ 15 message:msg //把Son1传来的值给message 16 }) 17 } 18 render(){ 19 return( 20 <React.Fragment> 21 {/* 我们在这里引入子组件 拿到上边声明的方法 */} 22 <Son1 msg={this.message.bind(this)}></Son1> 23 {/* 这里引入第二个子组件 并声明一个属性str 把Son1传来的值传过去 */} 24 <Son2 str={this.state.message}></Son2> 25 </React.Fragment> 26 ) 27 } 28 } 29 export default Father;
第一个子组件
1 import React from 'react'; 2 class Son1 extends React.Component{ 3 constructor(){ 4 super() 5 } 6 btn(msg){ 7 // 在这传给父组件一个值 8 this.props.msg('这是Son1传过来的') 9 } 10 render(){ 11 return( 12 <React.Fragment> 13 {/* 写一个点击按钮 来调用上边的值*/} 14 <button onClick={this.btn.bind(this)}>Son1中的按钮</button> 15 </React.Fragment> 16 ) 17 } 18 } 19 export default Son1;
第二个子组件
1 import React from 'react'; 2 class Son2 extends React.Component{ 3 constructor(){ 4 super() 5 } 6 render(){ 7 return( 8 <React.Fragment> 9 {/* 第二个子组件通过props 这个属性来接受父组件传过来的str */} 10 <div>接收Son1的值:{this.props.str}</div> 11 </React.Fragment> 12 ) 13 } 14 } 15 16 export default Son2;
这样就实现了简单的兄弟组件传值
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步