基于react组件之间的参数传递(详解)

 更新时间:2017年09月05日 07:49:05   作者:壹然  
下面小编就为大家带来一篇基于react组件之间的参数传递(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、父组件向子组件传递参数

class Child extends Component {
    componentDidMount(){
      let name = this.props.default;
      console,log(name);
    }
    render(){
      const { default} = this.props;
      return (
        <Input />
      )
   }
}
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  state = {
    name: 'Bob'
  }
  render() {
    return (
      <div>
        <Child default={this.state.name} />
      </div>
    )
  }
}

2、子组件向父组件传递参数

class Child extends Component {
    state={
      name:'Bob'
    }
    componentDidMount(){
      this.props.toParent(this.state.name);
    }
    render(){
      return (
        <Input />
      )
   }
}
import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
   state = {
    name:''
  }
  getChildInfo = (name)=>{
     this.setState({name:name});
   }
  render() {
    return (
      <div>
        <Child toParent={this.getChildInfo.bind(this)} />
      </div>
    )
  }
}

以上这篇基于react组件之间的参数传递(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react在安卓中输入框被手机键盘遮挡问题的解决方法

    react在安卓中输入框被手机键盘遮挡问题的解决方法

    这篇文章主要给大家介绍了关于react在安卓中输入框被手机键盘遮挡问题的解决方法,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2018-09-09
  • React中的Component组件详解

    React中的Component组件详解

    本章节,我们将一起探讨 React 中类组件和函数组件的定义,不同组件的通信方式,以及常规组件的强化方式,帮助你全方位认识 React 组件,从而对 React 的底层逻辑有进一步的理解,感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • React Diff原理深入分析

    React Diff原理深入分析

    这篇文章主要介绍了React Diff原理的相关资料,帮助大家更好的理解和学习使用React框架,感兴趣的朋友可以了解下
    2021-04-04
  • react-router6.x路由配置及导航详解

    react-router6.x路由配置及导航详解

    这篇文章主要介绍了react-router6.x路由配置及导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react源码层探究setState作用

    react源码层探究setState作用

    写react的时候,踩了几次坑发现setstate之后state不会立刻更新,于是判定setstate就是异步的方法,但是直到有一天,我想立刻拿到更新的state去传参另一个方法的时候,才问自己,为什么setstate是异步的?准确地说,在React内部机制能检测到的地方,setState就是异步的
    2022-10-10
  • React数据传递之组件内部通信的方法

    React数据传递之组件内部通信的方法

    这篇文章主要介绍了React数据传递之组件内部通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React通过ref获取子组件的数据和方法

    React通过ref获取子组件的数据和方法

    这篇文章主要介绍了React如何通过ref获取子组件的数据和方法,文中有详细的总结内容和代码示例,具有一定的参考价值,需要的朋友可以参考下
    2023-10-10
  • React 在非组件环境切换路由的方法

    React 在非组件环境切换路由的方法

    这篇文章主要介绍了React 在非组件环境切换路由的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • 详解React-Todos入门例子

    详解React-Todos入门例子

    本篇文章主要介绍了React-Todos入门例子,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • react中如何对自己的组件使用setFieldsValue

    react中如何对自己的组件使用setFieldsValue

    react中如何对自己的组件使用setFieldsValue问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论