【react】子组件向父组件传值
相信已经接触react的同学们,对父子间传值已经不陌生了,但是相对来说,父组件向子组件传值很简单,直接在 子组件的标签上传过去,再从子组件的props上结构出来就ok了,但是很多同学还是理解不了如何由子组件向父组件传值,我之前学的都是类组件,后来公司是全面拥抱hooks的,所以,今天我把这两种方法都分享给大家
1,类组件
import React, { Component } from "react";//定义父组件
export default class Parent extends Component {constructor(props) {super(props);this.state = {name: "this is parent",msg: "我是帅哥"};}//定义一个方法changeMsg = (x) => {this.setState({msg: x});};render() {return (<div><h2>{this.state.name}</h2><h3>{this.state.msg}</h3><hr /><Children changeMsg={this.changeMsg} /></div>);}
}//定义子组件
class Children extends Component {constructor(props) {super(props);this.state = {name: "this is child",msg: "测试哈哈"};}render() {return (<div><h2>{this.state.name}</h2><h2>{this.state.msg}</h2><button onClick={() => this.props.changeMsg(this.state.msg)}>点击子组件改变父组件的值</button></div>);}
}
按钮点击前后对比
2,hooks
import React, { useState } from "react";
//定义父组件const App = () => {const [sex, setSex] = useState('男')return (<><p>{sex}</p><Childer setSex={setSex} /></>);};
//定义子组件const Childer = (props) => {const {setSex} = propsreturn (<><h3>Childer</h3><button onClick={()=>setSex('女')}>点击改变性别</button></>);};export default App;
其实通过对比大家就能够看出来,在state值较少的时候,函数式组件要比类组件轻量很多,也更容易阅读理解,好了,今天就分享这些,希望能够帮助大家,提前祝大家新年快乐呦!
【react】子组件向父组件传值相关推荐
- react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
- react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
- react基础之--子组件向父组件传值
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据) 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函 ...
- react子组件向父组件传值
思想: 子组件往父组件传值,父组件中定义一个函数,在子组件中触发,触发的时候子组件把需要传递的数据当作参数传递过去,即可 1.父组件提供一个回调函数(其参数用于接受数据) 2.将函数作为属性的值,利用 ...
- 父html向子html传递参数,子组件向父组件传值
react 子组件怎么向父组件传值 Vue中子组件给父组件传值,父组件接收不到 vue组件在html声明的事件尽量不要用大写的哈,会被解析成小写的,因为html属性是大小写不敏感的 另外调用的函数要生 ...
- react函数子组件向父组件传值
在 react中父组件向子组件传值使用的props 子组件向父组件传值怎么传呢 可以使用useRef useRef是一个方法,且useRef返回一个可变的ref对象 initialValue被赋值给其 ...
- 019_Vue子组件向父组件传值
1. 父组件向子组件传递信息 1.1. props传递数据原则: 单向数据流. 1.2. 子组件通过自定义事件向父组件传递信息 <button @click='$emit("enlar ...
- 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
最新文章
- SpringBoot入门:新一代Java模板引擎Thymeleaf(实践)
- linux查找应用主机,Linux 主机和服务器基本性能检查命令和工具
- 华师 计算机系统 作业,华师网络学院作业答案-计算机组成原理问答题
- python二进制创建写模式_30 个Python代码实现的常用功能,精心整理版
- 163企业邮箱 端口服务器,163企业邮箱端口
- 在禁用uac_如何(真正)在Windows 7上完全禁用UAC
- 使用 jsonp解决跨域问题,在vue中成功调用心知天气api
- 走进tensorflow第九步——WARNING(警告)也值得关注
- 公众号服务器配置如何不显示,公众号服务器配置信息怎么设置
- Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置
- 视图框架自定义和坐标说明
- hadoop相关软件下载地址
- 江南大学计算机科学复试题目,2021江南大学计算机科学与技术考研真题经验参考书...
- hive正则匹配:regexp_replace、regexp_extract、regexp
- 大数据:千万个“路人甲”的价值逻辑
- 10行代码教你用Python扫描Excel表格,自动生成条形码!
- PDF批量加水印及加密解密
- flexnet许可证服务器_使用rrdtool进行Flexnet许可证监视
- [MATLAB学习笔记]MATLAB读取UG三维模型数据
- 入门篇001:为什么要学习数据结构与算法 by 王争(摘取对自己有用部分)