位置: IT常识 - 正文
推荐整理分享React组件通信-父子组件间的通信(react组件调用方法),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:react函数组件通信,react 不同组件间通信,react 组件传递数据,react组件写法,react 组件传递数据,react的组件通信,react的组件通信,react组建通信,内容如对您有帮助,希望把文章链接给更多的朋友!
组件之间存在嵌套关系:
在之前的案例中,我们只是创建了一个组件App;
如果我们一个应用程序将所有的逻辑都放在一个组件中,那么这个组件就会变成非常的臃肿和难以维护;
所以组件化的核心思想应该是对组件进行拆分,拆分成一个个小的组件;
再将这些组件组合嵌套在一起,最终形成我们的应用程序;
上面的嵌套逻辑如下,它们存在如下关系:
App组件是Header、Main、Footer组件的父组件;
import React, { Component } from 'react'import Header from './Header'import Main from "./Main"import Footer from './Footer'export class App extends Component { render() { return ( <div> <Header/> <Main/> <Footer/> </div> ) }}export default AppMain组件是Banner、ProductList组件的父组件
import React, { Component } from 'react'import Banner from './Banner'import ProductList from './ProductList'export class Main extends Component { render() { return ( <div> <div>Main</div> <Banner/> <ProductList/> </div> ) }}export default Main组件通信在开发过程中,我们会经常遇到需要组件之间相互进行通信:
比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据,让其进行展示;
又比如我们在Main中一次性请求了Banner数据和ProductList数据,那么就需要传递给他们来进行展示;
也可能是子组件中发生了事件,需要由父组件来完成某些操作,那就需要子组件向父组件传递事件;
总之,在一个React项目中,组件之间的通信是非常重要的环节;
父传子父组件在展示子组件时,可能会传递一些数据给子组件:
父组件通过 属性=值的形式来传递给子组件数据;
子组件通过 this.props 获取父组件传递过来的数据;
例如我们来看这样一个需求, 父组件将定义的数组books传递给子组件, 由子组件进行展示
将数组传递给子组件
export class App extends Component { 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> ) }}在子组件接受父组件传递的数据
export class Header extends Component { 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'export class Header extends Component { 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}export default 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'export class App extends Component { 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> ) }}export default App子组件在按钮发生点击时, 对父组件的传递的函数进行回调, 并传入一个参数出去
import React, { Component } from 'react'export class ConterButton extends Component { btnClick(conter) { // 当按钮发生点击事件时, 对父组件传递过来的函数进行回调 this.props.getConter(conter) } render() { return ( <div> <button onClick={() => this.btnClick(-1)}>-1</button> <button onClick={() => this.btnClick(1)}>+1</button> </div> ) }}export default ConterButton上一篇:订单30分钟未支付自动取消怎么实现?(订单超时十分钟)
下一篇:Win11怎么通过WinRE访问系统还原?(win11怎么通过ip连接打印机)
友情链接: 武汉网站建设