父传子
import React from 'react'
//父组件
export default class Parent extends React.Component{
constructor(){
super()
this.state={
message:"i am from parent"
}
}
render(){
return(
<div>
<Child text={this.state.message}></Child>
</div>
)
}
}
//子组件
class Child extends React.Component{
constructor(){
super()
}
render(){
return(
<div>{this.props.text}</div>
)
}
}
子传父
import React from 'react'
//父组件
export default class Parent extends React.Component{
constructor(){
super()
this.state={
message:"i am from parent"
}
}
parent=(data)=>{
console.log(data, "接收到子组件数据")
}
render(){
return(
<div>
<Child receive={this.parent}></Child>
</div>
)
}
}
//子组件
class Child extends React.Component{
constructor(){
super()
}
render(){
return(
<button onClick={()=>{this.props.receive("我是子组件的数据")}}>点击触发父亲的方法</button>
)
}
}
使用Context实现组件的跨级通信
//1.定义一个js文件,导出Context对象
import React from 'react'
const ThemeContext = React.createContext(null)
export default ThemeContext;
//---------------------引入Context对象
import React from 'react'
import ThemeContext from '@/tools/contexts'
export default class ContextComp extends React.Component {
constructor() {
super()
}
render() {
//ThemeContext.Provider 数据的提供者,允许消费组件订阅context的变化
//value就是给子组件暴露的数据
return (<ThemeContext.Provider value={{name:"zhangsan"}}>
<ThemedButton></ThemedButton>//子组件ThemedButton
</ThemeContext.Provider>)
}
}
//子组件ThemedButton
class ThemedButton extends React.Component {
//这能让你使用 this.context 来消费最近 Context 上的那个值
static contextType = ThemeContext;
render() {
return <div>
<Content></Content>
<button>{this.context.name}</button>
</div>
}
}
//ThemeContext.Consumer 允许我们在函数组件中使用Context
//ThemeContext.Consumer中的箭头函数的入参就是最近一个Provider所暴露的数据
function Content() {
return (<ThemeContext.Consumer>{
obj => {
return <div>{obj.name}</div>
}
}</ThemeContext.Consumer>)
}
使用EventEmitter实现组件的通信
第一步:安装npm install events –save
//1.定义一个js文件,导出EventEmitter对象
import { EventEmitter } from 'events';
export default new EventEmitter()
//2.在需要接收数据的组件中注册事件监听
import React from 'react'
import emitter from '@/tools/events'
export default class List1 extends React.Component {
//组件挂载完毕 添加事件监听
componentDidMount() {
this.eventEmitter = emitter.addListener("eventType1", (message) => {
console.log(message, "这是list1组件")
})
}
//组件卸载的时候一定要移除监听事件,否则会有内存泄漏
componentWillUnmount(){
emitter.removeListener(this.eventEmitter)
}
render() {
return (<div>这是List1组件</div>)
}
}
//3.在发送数据的组件中通过emitter.emit()方法发送数据
import React from 'react'
import emitter from '@/tools/events'
export default class List2 extends React.Component {
sendMessage = () => {
//发送数据
emitter.emit("eventType1","来自list2的数据")
}
render() {
return (<div>
这是List2组件
<button onClick={this.sendMessage}>发送数据</button>
</div>)
}
}