React之组件通信

组件通信无外乎，下面这三种父子组件，子父组件，平行组件（也叫兄弟组件）间的数据传输。下面我们来分别说一下：

父子组件：

var Demo=React.createClass({getInitialState:function(){return{res:''}},tap:function(e){var str=e.target.value;this.setState({res:str})},render:function(){return(<div><h1>父组件</h1><input type="text" onChange={this.tap}/><Child name={this.state.res}/></div>
        )}
})
var Child=React.createClass({render:function(){console.log(this.props)return(<div><h1>子组件</h1><p>{this.props.name}</p></div>
        )}
})
ReactDOM.render(<Demo/>,document.getElementById('out'))

这里我们通过设置默认状态，添加onchange事件，并把状态以默认属性的形式给子组件，然后通过this.props来获取。

说完了父子组件，那么子组件如何传递到父组件呢？

<script type="text/babel">var Demo=React.createClass({getInitialState:function(){return{res:''}},render:function(){var _this=this;return(<div><h1>父组件</h1><p>{this.state.res}</p><Child name={function(s){_this.setState({res:s})}}/></div>
        )}
})
var Child=React.createClass({tap:function(e){var str=e.target.value;console.log(str)
//        this.props.name==function
//        this.props.name(a)==function(s)
//        a==sthis.props.name(str)
//        str==s
    },render:function(){console.log(this.props)return(<div><h1>子组件</h1><input type="text" onChange={this.tap}/>    </div>
        )}
})
ReactDOM.render(<Demo/>,document.getElementById('out'))</script>

【子组件】控制自己的 state 然后告诉【父组件】的点击状态，然后在【父组件】中展示出来。

----------------------------------------------------------------------------------------------------------------------------------------------------

同级组件间的通讯复杂点，不过这里可以说点思路，假如这两个组件拥有相同的父组件可以将父组件作为桥梁，一个组件先传递给父组件，然后父组件再传递给兄弟组件。

另外还可以使用观察着模式，还有redux。这两个我还没完全理解，日后再说。

转载于:https://www.cnblogs.com/ztl0918/p/6920963.html

React之组件通信相关推荐

一个播放器引发的思考——谈谈React跨组件通信
在我们react项目日常开发中,往往会遇到这样一个问题:如何去实现跨组件通信? 为了更好的理解此问题,接下来我们通过一个简单的栗子说明. 实现一个视频播放器假设有一个这样的需求,需要我们去实现一个简 ...
React中组件通信的几种方式
首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件 ...
(React入门)组件通信
1.父组件向子组件通信 props 父组件直接通过props向子组件传递需要的信息 import React, { Component } from 'react' //子组件 class Child ...
react父子组件通信
欢迎关注微信公众号:[ 全栈攻略 ] 在 React 中,数据是自顶而下单向流动的,即从父组件到子组件. 所以就存在父子组件之间的通信的必要性了. 父组件.jsx import React from ...
React兄弟组件通信
1.在父组件定义好回调函数接收组件A传过来的值 // 引入组件 import SonA from "./components/SonA" import SonB from &quo ...
react父子组件通信案例
父组件:App组件子组件:Search组件.List组件案例需求:文本框中输入关键词,点击搜索按钮后,下方列表展示出搜索结果实现思路: 子组件Search组件向父组件App传递状态(状态包括:是 ...
React兄弟组件之间通信
兄弟组件之间通信 React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件.那么如果想要两个子兄弟组件通信该怎么办呢? 答案是可以通过子组件向父组件推 ...
React组件通信--props
React组件通信 1.props接收数据 //index.js import App from "./App";ReactDOM.render(<App name='传递数 ...
[react] react兄弟组件如何通信？
[react] react兄弟组件如何通信? 状态提升,通过父组件的state和方法传递到两个子组件个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...

React之组件通信

React之组件通信相关推荐

最新文章

热门文章