首页 / REACT / React中父子组件传值

React中父子组件传值

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React中父子组件传值，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1642字，纯文字阅读大概需要3分钟。

内容图文

一.首先我们先来看父组件向子组件传值

1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的

我们来看父组件的代码

             1 import React from ‘react‘; 
 2 import Son1 from ‘./Son1‘;
 3class Father extends React.Component{
 4    constructor(){
 5        super();
 6 7    }
 8    render(){
 9return(
10             <React.Fragment>
11                 {/* 我们在这里引入子组件 并声明一个属性str  给他传一个hello */}
12                 <Son1 str=‘hello‘></Son1>
13             </React.Fragment>
14        )
15    }
1617}
18 export default Father;

接着看子组件

             1 import React from ‘react‘;
 2class Son1 extends React.Component{
 3    constructor(){
 4        super()
 5    }
 6 7    render(){
 8return(
 9             <React.Fragment>
10                 {/* 子组件通过props 这个属性来接受父组件传过来的str */}
11                 {this.props.str}
12             </React.Fragment>
13        )
14    }
1516}
17 export default Son1;

页面上就可以得到 hello这个值

技术分享图片

二. 子组件向父组件传值

在这里我们分为4个步骤

2.1、在父组件中声明一个函数，用于接收子组件的传值

2.2、通过组件属性的方法，把函数传递给子组件

先看父组件的代码

             1 import React from ‘react‘;  
 2 import Son1 from ‘./Son1‘;
 3class Father extends React.Component{
 4    constructor(){
 5        super();
 6 7    }
 8// 1、在这里中声明一个函数，用于接收子组件的传值 9    message(msg){
10// 通过形参接受到子组件的值并打印到控制台  11        console.log(msg)
12    }
13    render(){
14return(
15             <React.Fragment>
16               {/* 在这里声明一个msg属性，通过组件属性的方法，把函数传递给子组件 */}
17                 <Son1 msg={this.message}></Son1>
18             </React.Fragment>
19        )
20    }
2122}
23 export default Father;

2.3、在子组件中通过props属性调用父组件的函数，并通过参数传值

             1 import React from ‘react‘;
 2class Son1 extends React.Component{
 3    constructor(){
 4        super()
 5    }
 6    render(){
 7return(
 8             <React.Fragment>
 9             {/* 在子组件中通过props属性调用父组件的函数，并通过参数传值 */}
10                 {this.props.msg(‘hello Word‘)}
11             </React.Fragment>
12        )
13    }
1415}
16 export default Son1;

2.4、在父组件中的函数通过形参接收子组件的传值

这样就可以看到控制台打印的效果

技术分享图片

原文：https://www.cnblogs.com/z-j-c/p/12071640.html

内容总结

以上是互联网集市为您收集整理的React中父子组件传值全部内容，希望文章能够帮你解决React中父子组件传值所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1282488.html

来源：【匿名】