React组件通信-父子组件间的通信

文章目录

React父子组件通信

认识组件嵌套

组件之间存在嵌套关系：

在之前的案例中，我们只是创建了一个组件App；

如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；

所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；

再将这些组件组合嵌套在一起，最终形成我们的应用程序；

上面的嵌套逻辑如下，它们存在如下关系：

App组件是Header、Main、Footer组件的父组件；

import React,{ Component }from'react'import Header from'./Header'import Main from"./Main"import Footer from'./Footer'exportclassAppextendsComponent{render(){return(<div><Header/><Main/><Footer/></div>)}}exportdefault App

Main组件是Banner、ProductList组件的父组件

import React,{ Component }from'react'import Banner from'./Banner'import ProductList from'./ProductList'exportclassMainextendsComponent{render(){return(<div><div>Main</div><Banner/><ProductList/></div>)}}exportdefault Main

组件通信

在开发过程中，我们会经常遇到需要组件之间相互进行通信：

比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示；

又比如我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给他们来进行展示；

也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件；

总之，在一个React项目中，组件之间的通信是非常重要的环节；

父传子

父组件在展示子组件时，可能会传递一些数据给子组件：

父组件通过

属性=值

的形式来传递给子组件数据；

子组件通过

this.props 

获取父组件传递过来的数据；

例如我们来看这样一个需求, 父组件将定义的数组books传递给子组件, 由子组件进行展示

将数组传递给子组件

exportclassAppextendsComponent{constructor(){super()this.state ={books:[{name:"算法导论",price:79},{name:"数据结构",price:69},{name:"漫画算法",price:59},]}}render(){const{ books }=this.state

    return(<div>{/* 将数据传递给子组件 */}<Header books={books}/></div>)}}

在子组件接受父组件传递的数据

exportclassHeaderextendsComponent{render(){// 接受父组件传递过来的参数const{ books }=this.props
    return(<div><ul>{
            books.map(item=>{return(<li key={item.name}>名称:{item.name} 价格:{item.price}</li>)})}</ul></div>)}}

参数验证

对于传递给子组件的数据，有时候我们可能希望进行验证，特别是对于大型项目来说：

当然，如果你项目中默认继承了Flow或者TypeScript，那么直接就可以进行类型验证；

但是，即使我们没有使用Flow或者TypeScript，也可以通过

prop-types

库来进行参数验证；

从 React v15.5 开始，React.PropTypes 已移入另一个包中：prop-types 库

使用方法, 先在子组件中导入

PropTypes

, 再对传递过来的元素添加类型限制即可

import React,{ Component }from'react'// 导入PropTypesimport PropTypes from'prop-types'exportclassHeaderextendsComponent{render(){const{ books, name, age }=this.props
    return(<div><div>名字:{name} 年龄:{age}</div><ul>{
            books.map(item=>{return(<li key={item.name}>名称:{item.name} 价格:{item.price}</li>)})}</ul></div>)}}// 对参数添加类型的限制
Header.propTypes ={// 表示传入的类型是要求一个数组, 并且必传books: PropTypes.array.isRequired,// 传入类型string, 非必传name: PropTypes.string,// 传入类型number, 非必传age: PropTypes.number
}exportdefault Header

更多的验证方式，可以参考官网：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

比如验证数组，并且数组中包含哪些元素；

比如验证对象，并且对象中包含哪些key以及value是什么类型；

比如某个原生是必须的，使用 requiredFunc: PropTypes.func.isRequired

如果没有传递，我们希望有默认值呢？

我们使用defaultProps就可以了

Header.defaultProps ={name:"默认名称"}

子传父

某些情况，我们也需要子组件向父组件传递消息：

在vue中是通过自定义事件来完成的；

在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；

我们这里来完成一个案例：

将计数器案例进行拆解；

将按钮封装到子组件中：CounterButton；

CounterButton发生点击事件，将内容传递到父组件中，修改counter的值；

演示代码

父组件传递一个事件给子组件CounterButton

import React,{ Component }from'react'import ConterButton from'./c-cpn/ConterButton'exportclassAppextendsComponent{constructor(){super()this.state ={conter:100}}changeConter(conter){this.setState({conter:this.state.conter + conter })}render(){const{ conter }=this.state

    return(<div><h2>{conter}</h2>{/* 向子组件中传入一个事件 */}<ConterButton getConter={conter=>this.changeConter(conter)}/></div>)}}exportdefault App

子组件在按钮发生点击时, 对父组件的传递的函数进行回调, 并传入一个参数出去

import React,{ Component }from'react'exportclassConterButtonextendsComponent{btnClick(conter){// 当按钮发生点击事件时, 对父组件传递过来的函数进行回调this.props.getConter(conter)}render(){return(<div><button onClick={()=>this.btnClick(-1)}>-1</button><button onClick={()=>this.btnClick(1)}>+1</button></div>)}}exportdefault ConterButton