医院网站建设网站,学校网站开发价格,网站建设模式有哪些,专门看广告赚钱的appReact之组件间通信 组件通信#xff1a; 简单讲就是组件之间的传值#xff0c;包括state、函数等 1、父子组件通信 父组件给子组件传值 核心#xff1a;1、自定义属性#xff1b;2、props
父组件中: 自定义属性传值
import Header from /components/Headerconst Home ()…React之组件间通信 组件通信 简单讲就是组件之间的传值包括state、函数等 1、父子组件通信 父组件给子组件传值 核心1、自定义属性2、props
父组件中: 自定义属性传值
import Header from /components/Headerconst Home () {const test 父组件的值return (div测试/div{/* 在子组件的调用标签上,添加自定义属性,属性值就是传递给子组件的数据 */}Header test{test} //)
}
export default Home子组件中props接收
const Header (props: { test: string }) {// 子组件中props封装着 自定义属性对象console.log(props)return (divheader/div/)
}
export default Header2、子父组件通信 子组件给父组件传值 核心1、父组件传递子组件自定义方法2、子组件调用父组件的自定义方法并传自己子组件的数据 在父组件中 传递函数
import Header from /components/Headerconst Home () {const test (str: string) {console.log(str)}return (div测试/div{/* 向子组件传递自定义函数 */}Header test{test} //)
}
export default Home在子组件中 接收父组件的函数通过向父组件函数传参的方法方式将数据传递给父组件
interface IProps {test: ReturnTypetypeof Function // test: Function
}
const Header (props: IProps) {// 子组件中props封装着 自定义属性对象const str 子组件的值props.test(str)return (divheader/div/)
}export default Header3、非父子组件传值 兄弟组件或者其他非父子组件的传值。在Vue中使用的是自定义事件 definEmits()。但是React没有内置的自定义事件方法。需要借助第三方自定义事件例如events、eventemitter3、eventemitter2包 安装第三方包
$ yarn add eventsts 还需要安装
$ yarn add types/events -D封装自定义事件工具
// EventEmitter :它的实例可以通过require(events)来创建。
import EventEmitter from eventsconst emits new EventEmitter()
export default emits在传值的组件中注册自定义事件
import emits from /utils/events
import { useEffect } from react
const Header () {// 注册自定义事件test// 注册自定义事件需要在useEffect中完成useEffect(() {// 参数1: 自定义事件名// 参数2: 通信传递的值emits.emit(test, header 组件的值)}, [])return (divheader/div/)
}export default Header在接收值的组件中监听自定义事件
import emits from /utils/events
const Footer () {emits.on(test, (str: string) {console.log(str)})return (divfooter/div/)
}
export default Footer4、其他非父子组件之间的通信补充
4.1、全局状态管理Redux全家桶
redux数据持久化 redux异步操作
4.2、React内置的上下文对象context
通过createContext 创建要传递的数据对象
import { createContext } from reactconst appContext createContext({// 传递的数据test: context传的值---测试
})
export default appContext在使用创建的context对象的组件中 通过useContexthook获取上下文对象数据
import appContext from /utils/appContext
import { useContext } from reactconst Header () {// useContext接收自定义的上下文对象参数const context useContext(appContext)return (divheader/divp{context.test}/p/)
}
export default Header
