脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react组件之间的参数传递

基于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 echarts刷新不显示问题的解决方法

    react echarts刷新不显示问题的解决方法

    最近在写项目的时候遇到了一个问题,当编辑完代码后echarts图正常展示 , 可再次刷新页面 , echarts会消失,所以本文给大家介绍了react echarts刷新不显示问题原因和解决方法,需要的朋友可以参考下
    2024-02-02
  • 如何使用React构建一个高效的视频上传组件

    如何使用React构建一个高效的视频上传组件

    本文介绍了如何使用React构建一个高效的视频上传组件,包括基础概念、常见问题与解决方案以及易错点,通过实际代码案例,展示了如何实现文件大小和格式验证、上传进度显示等功能,并详细解释了跨域请求和并发上传控制等技术细节
    2025-01-01
  • 基于React实现无限滚动表格

    基于React实现无限滚动表格

    以文本为例,为了实现无限循环的视觉效果,我们需要准备两段相同的文本,并让第二段文本的头部衔接在第一段文本的尾部,同时,为两段文本设置相同的滚动动画,本文给大家介绍了基于React实现无限滚动表格,需要的朋友可以参考下
    2023-11-11
  • React中react-redux和路由详解

    React中react-redux和路由详解

    这篇文章主要介绍了React中react-redux和路由详解，redux早期被设计成可以在各个框架中使用，因此在不同的框架中使用的时候，要引入相应的插件，感兴趣的朋友可以继续学习下面文章
    2022-08-08
  • Electron整合React使用搭建开发环境的步骤详解

    Electron整合React使用搭建开发环境的步骤详解

    这篇文章主要介绍了Electron整合React使用搭建开发环境，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2020-06-06
  • 详解使用React全家桶搭建一个后台管理系统

    详解使用React全家桶搭建一个后台管理系统

    本篇文章主要介绍了使用React全家桶搭建一个后台管理系统，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • react-native使用leanclound消息推送的方法

    react-native使用leanclound消息推送的方法

    这篇文章主要介绍了react-native使用leanclound消息推送的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React子组件调用父组件的方法

    React子组件调用父组件的方法

    本文主要介绍了React子组件调用父组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • react实现阻止父容器滚动

    react实现阻止父容器滚动

    这篇文章主要介绍了react实现阻止父容器滚动方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 深入React 18源码useMemo useCallback memo用法及区别分析

    深入React 18源码useMemo useCallback memo用法及区别分析

    这篇文章主要为大家介绍了React 18源码深入分析useMemo useCallback memo用法及区别，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04

最新评论