React 学习之父子组件传值

父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。

1. 父组件向子组件通信

父组件向子组件传值之props方法：

父组件

import React from 'react'
import Child from "../Child";function CounterHook() {return (<div>{/*父子组件传值，props方式*/}<Child name={'CounterHook'} /></div>)
}export default CounterHook

子组件：

import React from "react";const Child = ({name}) => {return (<div><p>子组件得到的值：{name}</p></div>)
}export default Child

2。子组件向父组件传值

子组件向父组件传值之回调函数方法：

父组件：

import React, {useState} from 'react'
import Child from "../Child";function CounterHook() {const [count, setCount] = useState(0)return (<div><p>父组件： {count}</p>{/*name:父组件向子组件传值，props方式； setCount：子组件向父组件传值*/}<Child name={'CounterHook'} setCount={setCount}/></div>)
}export default CounterHook

子组件：点击子组件中的按钮，父组件中的count值每次会加1

import React from "react";const Child = ({name,setCount}) => {return (<div><p>子组件得到的值：{name}</p><button onClick={()=>setCount(count => count+1)}>点击+1</button></div>)
}export default Child

React 学习之父子组件传值相关推荐

Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
【React系列教程五】父子组件传值、defaultProps和propTypes
一.父组件给子组件传值(即子组件调用父组件数据和方法) 1.在调用子组件的时候,定义一个属性 <Header msg='首页'></Header> 2.子组件中通过 this ...
React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
父子组件传值.非父子组件传值: 类组件传值父子组件传值子传父: 子组件:事件的触发sendMsg=()=>{this.props.person();}父组件:<Child per ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
react 父子组件传值校验设置默认值
父子组件传值校验 & 设置默认值 import PropTypes from 'prop-types' 在class 类外面: 1-传值校验子组件名.propTypes= {avname= ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
快速理解Vue父子组件传值
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习. 1.父组件向子组件传值  ...
Vue非父子组件传值
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.非父子组件传值二.事件总线 2.$attrs / listeners VueX是笔者认为最稳定的非父子传值的方法 ...

React 学习之父子组件传值

1. 父组件向子组件通信

2。子组件向父组件传值

React 学习之父子组件传值相关推荐

最新文章

热门文章