VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • react 组件传值的三种方法

    建站教程 2019年11月09日 关键词:,,,

    整理 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>
      }
    }
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • Vue和React组件之间的传值方式详解
    • React父子组件间的传值的方法
    • React 子组件向父组件传值的方法
    • react-router实现跳转传值的方法示例
    • react写一个select组件的实现代码
    • react的滑动图片验证码组件的示例代码
    • React传值 组件传值 之间的关系详解

    广而告之:
    热门推荐:
    html中radio值的获取、赋值、注册事件示例详解

    1,radio分组 只要name一样,就是一组的,即一组中只能选择一个,如下: 复制代码代码如下: <span>group1:</span> <input type="radio" id="radio1" checked="checked" name="group1" />radio1 <input type="radio" id="radio2" name="group1" /&···

    织梦模板Dedecms网站地图模板如何安装使用的教程

    小编已将其运用到几个由dedecms建设的企业网站上。亲和百度蜘蛛,分页多层次特色,织梦系统最好用的网站地图! QQ截图20161215144955.jpg     用 DedeCMS(织梦) 系统搭建的网站多数都是以优化为主要目标的网站类型,既然是优化站 SEO 手段就离不开为网站···

    帝国cms公文签收系统完美支持7.0,7.2版本

    帝国cms公文签收系统主要功能有发布公文、签收公文、附件公文、置顶公文、公文管理、用户管理、公文搜索等 公文签收管理系统适合政府、司法、教育等部门使用。 发布公文:可以选择全部会员用户或指定用户、用户进行签收。 签收公文:签收公文后记录签收信息,实时显示签收状态···

    jQuery实现定时隐藏对话框的方法分析

    本文实例讲述了jQuery实现定时隐藏对话框的方法。分享给大家供大家参考,具体如下: 以下内容可能不完全正确,只是在有问题时进行参考。 1. setTimeout     :出现设置了时间,但是程序立即执行的情况。     :无论是window.setTimeout还是windo···

    JS实现查找数组中对象的属性值是否存在示例

    本文实例讲述了JS实现查找数组中对象的属性值是否存在。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var···

    PHP网页游戏学习之Xnova(ogame)源码解读(九)

    十二、舰队相关函数(unlocalised.php) 本节将把舰队派遣相关的函数做个说明,继续以注释方式说明;由于这次涉及的函数比较多,需要花不少时间来整理消化。 // ------------------------------------------------------------------- // // 以下是舰队派遣需要用到的函数列表···

    php绘制圆形的方法

    本文实例讲述了php绘制圆形的方法。分享给大家供大家参考。具体实现方法如下: php绘图的基本步骤,有四步(php.ini里的 extension = php_gb2.dll 组件首先需要启用) 1、创建画布; 2、画出所需要的图像(圆、直线、矩形、扇形、弧线.......); 3、输出到网页,或者另存; 4···

    MySql总弹出mySqlInstallerConsole窗口的解决方法

    MySql总是定时弹出一个MySQLInstallerConsole.exe的窗口,如何解决呐? 这貌似是一条安装命令,Installing MYSQL 5.6.21 using MySQLInstallerConsole.exe 使用它可以设置一些下载安装包,当然使用的是默认安装不需人工干预。关掉它也没有什么影响,win10状态下,从开始----&g···

    深入理解vue $refs的基本用法

    我最近在研究vue 的路上,看到了vue $refs的用法,那么今天也算个学习笔记吧! <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", methods:{ add···

    JS鼠标滚动分页效果示例

    首先先看问题: 在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢。 解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉。最简单的办法就是不分页(^···