React兄弟组件间传参

效果
父组件
子组件1
子组件2
描述：
完整代码

效果

点击子组件1的按钮然后将子组件1的name值传递给子组件2并在页面展示：

父组件

子组件1

子组件2

描述：

兄弟组件传参需要通过共同的父组件保存数据状态
父组件准备一个回调函数给子组件1，然后子组件1调用时将数据传给父组件并修改数据
父组件将修改后的数据传递给子组件2，子组件2接收并通过this.props.name进行展示

完整代码

import React from 'react'class Parent extends React.Component {state = {name:''}handlerClick = (data) => {this.setState({name:data})}render(){return (<div><Child1 onIncrement={this.handlerClick}></Child1><Child2 name = {this.state.name}></Child2></div>)  }
}class Child1 extends React.Component {state = {name:'Mika'}toHandlerClick = () => {this.props.onIncrement(this.state.name)}render(){return (<div><button onClick={this.toHandlerClick}>点击显示名字</button></div>)}
}class Child2 extends React.Component {state = {name:''}render(){return (<div>学生名：{this.props.name}</div>)}}export default Parent

React兄弟组件间传参相关推荐

VUE：兄弟组件间传参
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.定义一个中间 eventBus.js ,只有 2 行代码,用于传参: // 此页面是vue ...
Vue3父子组件间传参通信
Vue3 父子组件间通信前言一.父传子 defineProps 二.子传父 defineEmits 三.子组件暴露属性给父组件 defineExpose 四.依赖注入Provide / Injec ...
react事件组件设计传参使用
1.事件和原生js事件一致事件命名用驼峰式 onclick onClick onmouseover onMouseover 事件总是要响应一个函数 render() {return ( <d ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
前端学习（2659）：组件间传参
第一步第二步第三步子组件定义第四步
React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
react路由：路由传参params、search、state
react路由:路由传参params.search.state(含二级路由和三级路由) 一.准备工作: 1.创建myProject05-router目录 2.创建清单文件, npm init ...
React（5）React兄弟组件之间的通信
文章目录前言一.兄弟组件之间的通信原理二.三个组件的基本结构 1.子组件ColorSelector的基本结构 2.子组件ColorBoard的基本结构 3.父组件Color的基本结构三.Col ...
小程序页面间传参的五种方式
文章目录前言 1.使用globalData 2.使用storage 3.使用url 3.1 api跳转 3.2 组件跳转 4.使用通信通道 5.使用页面栈总结前言由于经常需要进行页面间传参且各 ...

React兄弟组件间传参

React兄弟组件间传参

效果

父组件

子组件1

子组件2

描述：

完整代码

React兄弟组件间传参相关推荐

最新文章

热门文章