本文转载自微信公众号《狗狗的前端世界》，作者西岭。转载本文请联系Gogo前端世界公众号。至此，我们已经掌握了组件的概念，组件的传值，组件状态的相关内容。有兴趣的可以看看我之前发布的内容，笔芯。大家应该已经发现，我们在学习React的时候，除了环境搭建和一些JSX语法，大量的时间花在了学习React中的数据流管理上。但是，我们在学习组件传值的时候，总是从父组件传值给子组件。我们从来没有将子组件的值传给父组件，也没有在多个兄弟组件之间传值。传值。根据单向数据流的内容，我们不确定数据是否可以从子组件传递到父组件。为什么我之前不说呢？因为我们的基础知识还不够，既然我们学完了组件状态，就ok了，那怎么办呢？组件数据从子组件传输到父组件。我们先来看孩子。关卡组件如何向父组件传递数据：本质上是使用回调函数。怎么做？父组件引入子组件后，在JSX中仍然使用Props方法，将事先写好的父组件的功能传递给子组件，在子组件中使用this.props来接收传入的函数叫做。在函数调用中，会需要访问父组件的值，传入函数调用的实参。父组件：importReact,{Component}from'react'importStatesfrom'./States'exportclassAppextendsComponent{state={name:'lisi'}callBack=(req)=>{this.setState({name:req})}render(){return(

)}}exportdefaultAppsubcomponent:importReact,{Component}from'react'exportclassStatesextendsComponent{render(){return()}}exportdefaultStates父组件与子组件通信。我们使用Props属性，子组件通过结合Props和回调函数与父组件通信。结合这两点，我们就可以实现兄弟组件的通信了。SiblingComponentCommunication兄弟组件的通信原理其实很简单，就是先使用回调函数向父组件传递数据，然后父组件使用Props将数据传递给子组件，如图下图：至于具体代码的实现，没有新的知识点内容，无非是两者结合：我们在父组件中引入子组件的内容，然后将函数传递给数据源的子组件，也使用Props将数据传递给另一个组件。父组件代码如下：importReact,{Component}from'react'importStatesfrom'./States'importBrotherfrom'./Brother'exportclassAppextendsComponent{state={name:'lisi'}callBack=(req)=>{this.setState({name:req})}render(){return()}}exportdefaultApp然后我们查看数据源组件，通过Props获取回调函数，调用传入数据：importReact，{Component}from'react'exportclassStatesextendsComponent{render(){return()}}exportdefaultStates然后在接收数据的子组件中，获取数据：importReact,{Component}from'react'exportclassBrotherextendsComponent{render(){return()}}exportdefaultBrother总结一下子组件传值给父组件很简单回调函数，没有复杂的方法，并且回调函数和Props的使用也可以轻松实现兄弟组件之间的数据传递。至此，我们已经使用Props完成了React数据流管理所有内容的学习。至于前面提到的JSX交互部分，用户对页面的操作都是由表单来承担的。那么接下来表格的处理才是重点，下周再更新，嘻嘻(●'?'●)