react 父子组件之间相互传值

深藏阁楼爱情的钟 2021-12-09 23:11 387阅读 0赞

From: [https://blog.csdn.net/luzhaopan/article/details/85003362][https_blog.csdn.net_luzhaopan_article_details_85003362]

1、定义父组件

import React, \{ PureComponent \} from 'react';  
  
export default class Father extends PureComponent \{  
  
render()\{  
  
return(  
<div>  
<p>父组件</p>  
  
</div>  
)  
\}  
\}

2、定义子组件

import React, \{ PureComponent \} from 'react';  
  
export default class Children extends PureComponent \{  
  
render()\{  
  
return(  
<div>  
<p>子组件</p>  
  
</div>  
)  
\}  
\}

3、父组件向子组件传值

import React, \{ PureComponent \} from 'react';  
// 引入子组件  
import Children from '@/components/Children';  
  
  
export default class Father extends PureComponent \{  
  
render()\{  
  
// 传给子组件 的数据  
const data= \{  
  
lt: '520',  
\};  
  
return(  
<div>  
<p>父组件</p>  
  
<Children data=\{ data \} />  
  
</div>  
)  
\}  
\}

子组件获取父组件传过来的值

import React, \{ PureComponent \} from 'react';  
  
export default class Children extends PureComponent \{  
  
constructor(props) \{  
super(props);  
this.state = \{  
  
\}  
  
render()\{  
  
return(  
<div>  
<p>子组件</p>  
// 获取父组件的值  
<p>\{ this.props.data.lt \}</p>  
  
</div>  
)  
\}  
\}

4、子组件向父组件传值

import React, \{ PureComponent \} from 'react';  
  
export default class Children extends PureComponent \{  
  
  
// 选中对应节点，选出符合条件的值  
onSelect = () => \{  
// 向父组件传值  
const lzp= \{  
name: lut,  
code: '1314',  
  
\};  
this.props.handleData(lzp);  
\};  
  
render()\{  
  
return(  
<div>  
<p>子组件</p>  
<Button onClick=\{this.onSelect\}> 向父组件传值 </Button>  
  
</div>  
)  
\}  
\}

import React, \{ PureComponent \} from 'react';  
// 引入子组件  
import Children from '@/components/Children';  
  
  
export default class Father extends PureComponent \{  
  
handleData = (a) => \{  
// 获取子组件传来的值a  
console.log(a); // lzp= \{name: lut,code: '1314'\}  
  
\};  
  
render()\{  
  
return(  
<div>  
<p>父组件</p>  
  
<Children handleData=\{this.handleData\} />  
  
</div>  
)  
\}  
\}

[https_blog.csdn.net_luzhaopan_article_details_85003362]: https://blog.csdn.net/luzhaopan/article/details/85003362