react 组件传值

一、父传子 - 函数式组件

function Father (props) {const {money} = props; // 解构render() {<div><Child getSonMoney={money}/></div>}
}function Child (props) {return (<div><p>我爸爸现在有存款：${props.getSonMoney}</p></div>)
}const msg = {money: 1000000};ReactDOM.render(<Father {...msg} />, document.getElementByid('root'))

二、子传父 - 函数式组件

三、父传子 - 类式组件

class Father {state = {money: 199999}render() {<div><Child getSonMoney={this.state.money}/></div>}
}class Child {return (<div><p>我爸爸现在有存款：${this.props.getSonMoney}</p></div>)
}ReactDOM.render(<Father/>, document.getElementByid('root'))

四、子传父 - 类式组件

class Father {state = {money: 0}getChildMoney(data) {this.setState({money: data})}render() {<div><p>儿子的存款有：<span>{this.state.money}</span></p><Child money={this.getChildMoney}/></div>}
}class Child {state = {money: 199999}handleClick() {this.props.money(this.state.money)}return (<div><p>我爸爸现在有存款：${this.props.getSonMoney}</p><button onClick={this.handleClick}>发送数据</button></div>)
}ReactDOM.render(<Father/>, document.getElementByid('root'))

react 组件传值相关推荐

react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
React 中的父子组件兄弟组件传值
1.父组件向子组件传值 1.1 我们要明白父组件 --> 子组件是通过props这个属性来传值的父组件 import React from 'react'; import './App.cs ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
React 组件间传值的几种情形
文章出自个人博客 https://knightyun.github.io/2020/09/03/js-react-props,转载请申明父级传向子级这应该是最常见的一种场景,通过在子组件上写 pr ...
react 父子传值_React父子组件传值
父组件向子组件传值使用props,子组件向父组件传值通过触发方法来传值.具体栗子如下. 一.创建父组件index import React, { useState } from "react ...
Vue和React组件之间的传值方式
在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式组件的传值场景无外乎以下几种: 父子之间兄弟之间多层级之间(孙子祖父或者更多) 任意组件之间父子之间 ...
react函数式组件传值之父传子
今天我们主要说下react函数式组件如何进行父组件向子组件传值.在开发过程中,为了提高可读性或者复用性,我们会进行组件的拆分.先说下,我们在引入子组件时,子组件的名字一定要大写,否则会报错(这是个ba ...
react之间的组件传值
关于react组件之间的传值 1.首先是父子组件最基础的传值父传子采用props的格式在父组件里引入的子组件上进行传值子组件中采用this.props.xx的方式获取子传父通过在父组件引入 ...

react 组件传值

react 组件传值相关推荐

最新文章

热门文章