react组件间的信息交流数据传递图文讲解

yvonne 发布于2019-08-30 15:54 / 3351人阅读

摘要：子组件请输入邮箱父组件，此处通过获取子组件的值用户邮箱兄弟组件传递信息我们可以通过给这两兄弟一个共同的父亲，然后结合上面的两种方法将老大的信息传给父亲子传父，再通过父亲传给老二信息实现交流父传子这里只写出了父组件代码实现到的数据传递

React 组件之间交流的方式，可以分为以下 3 种：
a【父组件】向【子组件】传值；
b【子组件】向【父组件】传值；
c 没有任何嵌套关系的组件之间传值（PS：比如：兄弟组件之间传值）

1.父组件向子组件传递信息

这个比较容易和直观

// 父组件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: true
    };
  },
  render: function() {
    return (
      
    );
  }
});

// 子组件
var ToggleButton = React.createClass({
  render: function () {
    // 从【父组件】获取的值
    var checked = this.props.checked,
        text = this.props.text;

    return (
        {text}: 
    );
  }
});

2子组件向父组件传递信息

子组件需要控制自己的 state，然后告诉父组件自己的state，通过props调用父组件中用来控制state的函数，在父组件中展示子组件的state变化。

//子组件
var Child = React.createClass({
    render: function(){
        return (
            
                请输入邮箱：
            
        )
    }
});
//父组件，此处通过event.target.value获取子组件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ""
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            
                用户邮箱：{this.state.email}
                
            
        )
    }
});
React.render(
  ,
  document.getElementById("test")
);

3.兄弟组件传递信息

我们可以通过给这两兄弟一个共同的父亲，然后结合上面的两种方法
将老大的信息传给父亲（子传父），再通过父亲传给老二信息实现交流（父传子）

这里只写出了父组件代码实现input到list的数据传递

class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            arry: []
        }
    }
    getDate(obj) {
        this.state.arry.push(obj)
        this.setState({
            arry: this.state.arry
        })
        console.log(this.state.arry)
    }
    render() {
        return (
            
                
                
            
        )
    }
}

云服务器 GPU云服务器信息交流变更备案信息图文引导主动发送微信图文信息信息传递

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

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

react-navigation使用详解

摘要：导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的示例项目报如下的错误，可能是大家使用了命令导致的，解决这个错误的办法就是将删除，然后重新使用命令来安装，最后使用来起服务，应该就不报错了。 react-navigation导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误，可能是大家使用了 yarn install 命...

stonezhu 2019-08-23 11:47 评论0 收藏0
React 组件之间如何交流

摘要：前言今天群里面有很多都在问关于组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。英文能力有限，如果有不对的地方请跟我留言，一定修改原著序处理组件之间的交流方式，主要取决于组件之间的关系，然而这些关系的约定人就是你。前言今天群里面有很多都在问关于 React 组件之间是如何通信的问题，之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译，看过我博客的人都知道...

tomlingtm 2019-08-19 17:06 评论0 收藏0
React 新特性讲解及实例(一)

摘要：接收一个属性，这个组件会让后代组件统一提供这个变量值。因此对于同一个对象而言，一定是后代元素。解决方法就是把内联函数提取出来，如下讲了这么多，我们还没有讲到其实我们已经讲完了的工作原理了。本节主要讲解以下几个新的特性： Context ContextType lazy Suspense 错误边界（Error boundaries） memo 想阅读更多优质文章请猛戳GitHub博...

Betta 2019-08-23 18:04 评论0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，将介绍开发应用时，经常用到的模式，这些模式并非都有官方名称，所以有些模式的命名并不一定准确，请读者主要关注模式的内容。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。本篇是React深入系列的最后一篇，将介绍开发React应用时，经常用到的模式，这些模式并非都有...

Chao 2019-08-22 17:28 评论0 收藏0