初识React(8)：父子组件传参

paulli3 发布于2019-08-23 11:48 / 3024人阅读

摘要：父级向子级传参父子组件通信主要用到，如下在父组件中父组件我是父级过来的内容在子组件中子组件通过上面例子可以看出，在父组件中，我们引入子组件，通过给子组件添加属性，来起到传参的作用，子组件可以通过获取父组件传过来的参数子级向父级传参在父组件中

父级向子级传参

父子组件通信主要用到props，如下：

在父组件中：

import React from "react"
import ChildCom from "./childCom.js"

class ParentCom extends React.Component {
   render() {
     return (
       
         父组件
         
       
     )
   }
}

export default ParentCom;

在子组件中：

import React from "react"

class ChildCom extends React.Component {
   render() {
     return (
       
         子组件
         
           {this.props.content}
         
       
     )
   }
}

export default ChildCom;

通过上面例子可以看出，在父组件中，我们引入子组件，通过给子组件添加属性，来起到传参的作用，子组件可以通过props获取父组件传过来的参数

子级向父级传参

在父组件中：

import React from "react"
import ChildCom from "./childCom.js"

class ParentCom extends React.Component {
  state = {
    getChildValue: ""
  }
  getChildValue(value) {
    this.setState({
      getChildValue: value
    })
  }

   render() {
     return (
       
         父组件
         子组件过来的值为：{this.state.getChildValue}
         
       
     )
   }
}

export default ParentCom;

在子组件中：

import React from "react"

class ChildCom extends React.Component {
  valueToParent(value) {
    this.props.onValue(value);
  }
   render() {
     return (
       
         子组件
         
            向父组件传值123
         
       
     )
   }
}

export default ChildCom;

子组件向父组件传参，其实就是在父组件中给子组件添加一个属性，这个属性的内容为一个函数，然后在子组件中调用这个函数，即可达到传递参数的效果

GPU云服务器云服务器父子组件父子组件通信父子组件通讯父子组件-动态渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97488.html

手挽手带你学React：二档 React生命周期以及组件开发

摘要：手挽手带你学入门二档组件开发的开始，合理运用生命周期和组件，能够让你的开发变地流利又这篇文章带你学会创建组件，运用组建。手挽手带你学React入门二档,组件开发的开始，合理运用生命周期和组件，能够让你的开发变地流利又happy,这篇文章带你学会创建组件，运用组建。学起来吧！ React 组件生命周期学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大...

izhuhaodev 2019-08-23 15:11 评论0 收藏0
初识React(3)：组件

摘要：创建组件创建组件之前要注意以下几点组件创建的名称首字母得大写组件中返回的只能是一个根节点，所有的内容得用一个元素都框起来无状态函数式组件无状态函数式组件可以理解成就是一个函数生成的，使得代码的可读性更好，并且精简便利，减少了冗余，无状态组件创建组件创建组件之前要注意以下几点：组件创建的名称首字母得大写组件中返回的JSX只能是一个根节点，所有的内容得用一个元素都框起来 1.无...

FullStackDeveloper 2019-08-26 12:19 评论0 收藏0
微信小程序：父子间组件传参

摘要：创建组件打开微信开发者工具，创建组件，会生成四个文件在中我是组件在中私有数据，可用于模版渲染生命周期函数，可以为函数，或一个在段中定义的方法名在中即组件创建完成引入组件要在中引入组件，则在中在中微信小程序组件传参则组件就能够显示，要使得组件 1.创建组件打开微信开发者工具，创建组件，会生成四个文件：wxml,wxss,js,json 在wxml中：我是组件A 在js中： Compo...

zollero 2019-08-22 18:11 评论0 收藏0
React专题：react，redux以及react-redux常见一些面试题

摘要：我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄，该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流，比较有序，有便于管理，它随着视图库的开发而被概念化。面试中问框架，经常会问到一些原理性的东西，明明一直在用，也知道怎么用，但面试时却答不上来，也是挺尴尬的，就干脆把react相关的问题查了下资料，再按自己的理解整理了下这些答案。 reac...

darcrand 2019-08-23 13:41 评论0 收藏0
react 和小程序对比

摘要：主要从以下几个方面对比下和微信小程序生命周期小程序页面加载时触发。数据绑定小程序中的动态数据均来自对应的。例如显示与隐藏元素小程序在微信小程序中使用和来控制组件的显示与隐藏。主要从以下几个方面对比下react和微信小程序生命周期 react 小程序 onLoad: 页面加载时触发。一个页面只会调用一次，可以在onload的参数options中获取打开当前页面路径中的参数。 ...

Lowky 2019-08-23 11:57 评论0 收藏0