“React组件间通信”学习笔记

darcrand 发布于2019-08-21 10:51 / 450人阅读

React没有双向通信那么自由，而是单向的，即从父组件到子组件。

父组件->子组件：props

子组件->父组件：callback

子组件->子组件：子组件通过回调改变父组件中的状态，通过props再修改另一个组件的状态

父子组件间通信

var CalendarControl = React.createClass({
    getDefaultProps: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, "yyyy"),
            month: parseInt(util.formatDate(newDate, "MM")),
            day: parseInt(util.formatDate(newDate, "dd"))
        };
    },
    render: function () {
        return (
            
                
            
        )
    }
});

子父组件间通信

var CalendarControl = React.createClass({
    getInitialState: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, "yyyy"),
            month: parseInt(util.formatDate(newDate, "MM")),
            day: parseInt(util.formatDate(newDate, "dd"))
        };
    },
    //给子组件一个回调函数，用来更新父组件的状态，然后影响另一个组件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });
    },
    render: function () {
        return (
            
                
            
        )
    }
});

var CalendarHeader = React.createClass({
    getInitialState: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, "yyyy"),//设置默认年为今年
            month: parseInt(util.formatDate(newDate, "MM"))//设置默认日为今天
        };
    },
    handleLeftClick: function () {
        var newMonth = parseInt(this.state.month) - 1;
        var year = this.state.year;
        if (newMonth < 1) {
            year--;
            newMonth = 12;
        }
        this.state.month = newMonth;
        this.state.year = year;
        this.setState(this.state);//在设置了state之后需要调用setState方法来修改状态值，
        //每次修改之后都会自动调用this.render方法，再次渲染组件
        this.props.updateFilter(year, newMonth);
    },
    handleRightClick: function () {
        var newMonth = parseInt(this.state.month) + 1;
        var year = this.state.year;
        if (newMonth > 12) {
            year++;
            newMonth = 1;
        }
        this.state.month = newMonth;
        this.state.year = year;
        this.setState(this.state);//在设置了state之后需要调用setState方法来修改状态值，
        //每次修改之后都会自动调用this.render方法，再次渲染组件，以此向父组件通信
        this.props.updateFilter(year,newMonth);
    },

    render: function () {
        return (
            
                {this.state.month}月
                {this.state.year}年
                 
                 
            
        )
    }
});

兄弟组件间通信

var CalendarControl = React.createClass({
    getInitialState: function () {
        var newDate = new Date();
        return {
            year: util.formatDate(newDate, "yyyy"),
            month: parseInt(util.formatDate(newDate, "MM")),
            day: parseInt(util.formatDate(newDate, "dd"))
        };
    },
    //给子组件一个回调函数，用来更新父组件的状态，然后影响另一个组件
    handleFilterUpdate: function (filterYear, filterMonth) {
        this.setState({
            year: filterYear,
            month: filterMonth
        });//刷新父组件状态
    },
    render: function () {
        return (
            
                
                //父组件状态被另一个子组件刷新后，这个子组件就会被刷新
            
        )
    }
});

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

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

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

解密传统组件间通信与React组件间通信

摘要：同时吸取了社区大量优秀思想，进行归纳比对。有兴趣的读者可以点击下面的链接购买，再次感谢各位的支持与鼓励恳请各位批评指正京东当当原文网址在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式通过归纳范，可以将任意组件间的通信归类为四种类型的组件间通信，分别是父子组件，爷孙组件，兄弟组件和任意组件，需要注意的是前三个也可以算...

CoderBear 2019-08-23 12:01 评论0 收藏0
React组件间通信

摘要：组件间通信父组件中放入子组件将自身属性与方法传给子组件子组件即父组件的一部分所以只要父组件重新子组件也必定重新子组件接收父组件传过来的属性与方法调用父组件方法为父组件中的父组件子组件调用子组件自己的方法调用父组件方法父组件向子组件通信数组件间通信 1.父组件中放入子组件,将自身属性与方法传给子组件,子组件即父组件的一部分,所以只要父组件重新render,子组件也必定重新render....

chenatu 2019-08-20 18:17 评论0 收藏0
react组件通信实现表单提交

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

LoftySoul 2019-08-20 18:16 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

neuSnail 2019-08-20 14:16 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

wyk1184 2019-08-30 15:52 评论0 收藏0