react 组件传值的三种方法


Posted in Javascript onJune 03, 2019

整理 react 组件传值 三种方式

父组件向子组件传值(通过props传值)

子组件:

class Children extends Component{
    constructor(props){
      super(props);
    }
    render(){
      return(
        <div>这是:{this.props.name}</div> // 这是 父向子
      )
    }
  }

父组件:

class App extends React.Component{
    render(){
      return(
        <div>
          <Children name="父向子"/>
        </div>
      )
    }
  }

父组件向子组件传值(回调函数)

子组件

class Children extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样
    }
    render(){
      return(
        <div>
          <div>父组件的背景色{this.props.bgcolor}</div> // 子组件接收父组件传过来的值 bgcolor
          <button onClick={(e)=>{this.handerClick(e)}}>改变父组件背景</button> // 子组件执行函数
        </div>
      )
    }
  }

父组件

class Father extends Component{
    constructor(props){
      super(props)
      this.state = {
        bgcolor:'pink'
      }
    }
    bgChange(color){
      this.setState({
        bgcolor:color
      })
    }
    render(props){
      <div style={{background:this.state.bgcolor}}>
              // 给子组件传递的值 color 
        <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> 
                          // changeColor 子组件的参数=color 当做形参
      </div>
    }
  }

兄弟组件传值(子传给父,父再传给另一个子)

子组件1

class Children1 extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeChild2Color('skyblue') 
      // 改变兄弟组件的颜色 把changeChild2Color的参数传给父
    }
    render(){
      return(
        <div>
          <div>children1</div>
          <button onClick={(e)=>{this.handerClick(e)}}>改变children2背景</button>
        </div>
      )
    }
  }

子组件2

class Children2 extends Component{
    constructor(props){
      super(props);
    }
    render(){
      return(
        <div style={{background:this.props.bgcolor}}>
        // 从父元素获取自己的背景色
          <div>children2 背景色 {this.props.bgcolor}</div>
          // children2 背景色 skyblue
        </div>
      )
    }
  }

父组件

class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      child2bgcolor:'pink'
    }
  }
  onchild2bgChange(color){
    this.setState({
      child2bgcolor:color
    })
  }
  render(props){
    <div>
      <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
      <Children2 bgcolor={this.state.child2bgcolor} />
    </div>
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
Preload基础使用方法详解
Feb 03 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 #Javascript
Node.js 的 GC 机制详解
Jun 03 #Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 #Javascript
react-native滑动吸顶效果的实现过程
Jun 03 #Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 #Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 #Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 #Javascript
You might like
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
一分钟理解js闭包
2016/05/04 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python实现简单多人聊天室
2018/12/11 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
求职信模版
2013/11/30 职场文书
国税会议欢迎词
2014/01/16 职场文书
学期评语大全
2014/04/30 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
OpenCV实现反阈值二值化
2021/11/17 Java/Android