React之组件通信

binta 发布于2019-08-26 13:42 / 2707人阅读

摘要：最近闲来无事自学框架，自学过程中所有的问题经验都会在此记录，希望可以帮助到学习框架的同学废话不多说上代码。

最近闲来无事自学React框架，自学过程中所有的问题经验都会在此记录，希望可以帮助到学习React框架的同学,废话不多说上代码。
首先是父传子：

import React, { Component } from "react";
import Com1 from "./componments/com1"

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      arr: [{
          "userName": "fangMing", "text": "123333", "result": true
      }, {
          "userName": "zhangSan", "text": "345555", "result": false
      }, {
          "userName": "liSi", "text": "567777", "result": true
      }, {
          "userName": "wangWu", "text": "789999", "result": true
      },]
    };
    this.foo = "我来自父组件"  //这个也是父传子方法，可能初学者有点迷，刚开始我也用来和arr = {this.state.arr}做区分
  };
  render() {
    return (
      
        
                              
        
        
      
    );
  }
}
export default App;

子组件：

import React, { Component } from "react";

class Ele extends Component{
    constructor(props){
       super(props)  
    };
    render(){
        return (
           
               Hello, {this.props.age}
               {this.props.fn}
               
                    {
                        this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
                            return (
                                
                                    {item.userName} 评论是:{item.text}
                                
                            )
                        })
                    }
                
           
        );
    };
}

export default Ele;

结果显示：

以上是父传子的方法，主要还是使用props传值，下面看看子传父.

子传父：
首先是子组件：

import React, { Component } from "react";

class Ele extends Component{
    constructor(props){
       super(props);
       this.state = ({
            childText: "我来自子组件"
       })  
    };
    clickFun(text) {  //定义触发的方法
        this.props.pfn(text)//这个地方把值传递给了props的事件当中
    }
    render(){
        return (
                          
                {/* 通过事件进行传值，如果想得到event，可以在参数最后加一个event，
                这个地方还是要强调，this，this，this */}
                
           
        );
    };
}

export default Ele;

父组件：

import React, { Component } from "react";
import Com1 from "./componments/com1"

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      parentText: "现在是父组件",     
  };
  fn(data) {
    this.setState({
        parentText: data //把父组件中的parentText替换为子组件传递的值
    },() =>{
       console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作
    });
  };
  render() {
    return (
      
         {/*通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变 */}
        text is {this.state.parentText}
      
    );
  }
}
export default App;

以上是父子组件传值的方法，有不对的地方还望指正
还有兄弟组件传值还没学到，兄弟组件传值学到会更新上来
源码地址：
https://github.com/Nick091608... 欢迎star

私有云服务器托管组件和组件通信组件通信组件之间通信父子组件通信

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

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

我学react之父子组件通信

摘要：父子组件通信父子间通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信兄弟组件通信父组件向子组件通信由于是单向数据流向的，父组件一般通过向子组件传递相关的一些信息来看一下下面这个例子，在这里我封装了一个组件，它的显示与取消的状态交 react父子组件通信 react父子间通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信兄弟组件通信父组件向子组件通信...

wwolf 2019-08-23 15:38 评论0 收藏0
react与redux通信之hook

摘要：新方案随着的发布，功能正式投入使用。那么，如果我们使用了，又该如何跟通信呢针对于这个问题，业界有人提供了一个取代的新插件。提供的创建上下文，返回该对象。可以预见的是，当你使用了，会在项目中逐渐把消灭，最后跟语法糖告别，回归函数的世界。 react和redux建立通信的方式有2种方案：老方案connect 新方案hook 老方案connect 曾经，我们会使用connect建立r...

lemon 2019-08-23 17:08 评论0 收藏0
React中组件通信的几种方式

摘要：首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信父组件向子组件通信数据流动是单向的父组件向子组件通信也是最常见的父组件通过向子组件传递需要的信息子组件向父组件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 评论0 收藏0
react组件通信实现表单提交

摘要：组件通信实现表单提交昨晚做了一个的例子，主要实现的是提交表单实现评论的功能，在做之前先简单介绍一下。并称为前端大框架，就目前来看，尽管发布了也在今年月份发布了，更不在话下，大家要是想学习的话可以去官网学习。 react组件通信实现表单提交昨晚做了一个react的例子，主要实现的是提交表单实现评论的功能，在做之前先简单介绍一下React。 showImg(https://segment...

LoftySoul 2019-08-20 18:16 评论0 收藏0
一个播放器引发的思考——谈谈React跨组件通信

摘要：如果某个组件订阅该事件太晚，那发布者之前所发布的该类事件，它都接收不到，而方案一和二的优点则在于，无论如何，组件都能拿到该的最终状态值有存在内存泄漏的风险。原文地址 - 欢迎关注我的博客在我们react项目日常开发中，往往会遇到这样一个问题：如何去实现跨组件通信？为了更好的理解此问题，接下来我们通过一个简单的栗子说明。实现一个视频播放器假设有一个这样的需求，需要我们去实现一个...

Dean 2019-08-26 13:50 评论0 收藏0