反应中传递参数的方式有哪些

  介绍

这篇文章主要介绍反应中传递参数的方式有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

反应是一个用于构建用户界面的JAVASCRIPT库。

主反应要用于构建UI,很多人认为是MVC中反应的V(视图)。

反应起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。

反应拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

最常见的就是父子组件之间传递参数

父组件往子组件传值,直接用this.props就可以实现

父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过这个。道具就可以获取到父组件传递过去的数据

//,父组件,渲染(),{,,,,,,,   ,,,return (,,,,,,,,,,,,,,,//,使用自定义属性传递需要传递的方法或者参数   ,,,,,,,,,,,,,,,& lt; ShopUi  toson={this.state}祝辞& lt;/ShopUi>,,,,,,,,,,,,   ,,,,,,,,,,,,,,,,,,)   ,,,},//子组件//通过this.props.toson就可以获取到父组件传递过来的数据,,如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了   ,,,,,tograndson={this.props.toson}   ,孙组件通过this.props。tograndson获取到数据

子组件给父组件传值的话,需要在父组件设置接收函数和状态,同时将函数名通过道具传递给子组件

也就是给子组件传入父组件的方法,在子组件进行调用

//孙子组件export  default  class  Grandson  extends 组件{   ,,,渲染(){,,,,,,,return  (,,,,,,,,,,, & lt; div 风格={{边界:“1 px  solid  red",保证金:,“10 px"}}祝辞   {this.props.name}:,,,,,,,,,,,,,,,, & lt; select  onChange={this.props.handleSelect}比;   ,,,,,,,,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/option 价值="男">男   <选项值="女">女>   
)   }   };//子组件出口的默认类儿童扩展组件{   呈现(){返回(   {this.props.name}: <输入onChange={this.props.handleVal}/>   <孙子的名字=靶浴北餳andleSelect={this.props.handleSelect}/>   
)   }   };//父组件出口的默认类父扩展组件{      构造函数(道具){   超级(道具)this.state={   用户名:”,   性:“   }   },   {这个handleVal(事件)。设置状态({用户名:event.target.value});   },   handleSelect(值){。设置状态({性:event.target.value});   },   呈现(){返回(   
用户姓名:{this.state.username}
  
用户性别:{this.state.sex}
  <孩子name="姓名“handleVal={。handleVal} handleSelect={this.handleSelect}/>