React 父子组件传值

香菊网 发表于: 2019-05-24 分类: js部分  前端front  H5部分  服务器  

 

在单页面里面,父子组件传值是比较常见的,研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行接收就可以了;子组件向父组件传值需要绑定一个事件,然后事件是父组件传递过来的this.props.event来进行值的更替

父组件中

import React from 'react';
import Children from './Parent';

// 父组件
class Parent extends React.Component {
  state = { sendData: 'hello !' }
  checkShow(e){

    // 打印this的时候 需要绑定当前组件的this  否则this是这个单个组件的this
    console.log(‘触发父组件事件’, e)
  }
  render(){
     return (

       // 向子组件传 sendData
       // 并且向子组件传了一个 checkShow 事件
       <Children sendData={this.state.sendData} checkShow={this.checkShow.bind(this)} />
     )
  }
}

export default Parent

子组件中

import React from 'react';

// 子组件
class Children extends React.Component {
  state = { sendData: 'hello !' }
  checkShow(e){

    console.log(‘向父组件发送数据’)
    this.props.checkShow(this.state)
  }
  render(){

     // this.props.sendData 打印的就是父组件传递的属性
     console.log(this.props.sendData)
     return (
       // 向子组件传 sendData
       // 并且向子组件传了一个 checkShow 事件

       <div onClick={this.checkShow.bind(this)}> 点击发送子组件的数据 </div>
     )
  }
}

export default Children 

 

 点击查看 React 入门进阶

 

标签: js部分前端frontH5部分服务器
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮