react组件间的通信
父子通信
父组件可以将自己的状态通过属性的方式传递给子组件,然后子组件通过props获取到传递来的属性。
father.js父组件中
render() {
let {list} =this.state;
return (
<div>
<List list={list}/>
</div>
)
}
son.js子组件中
render() {
//接收到父组件传过来的数据
let {list} =this.props;
return(
<div>
{
list.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</div>
)
}
子父通信
父组件可以将一个更改自身状态的方法传递给子组件,然后子组件通过props接受后进行调用,相当于父组件的方法被执行了,从而更改了自身的状态。
父组件中想要获取到子组件input输入的数据
父组件中的代码
import React, { Component } from 'react'
import Addinput from './AddInput'
export default class List extends Component {
constructor() {
super()
this.state = {
list:["a","b","c"]
}
}
add=(str)=>{
this.setState({
list:[...this.state.list,str]
})
console.log(str)
}
render() {
let { list } = this.state
return (
<div>
<Addinput add={this.add}/>
<ul>
{
list.map((item,index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
}
//定义一个函数,当按下enter键时,调用子组件传递过来的add方法
子组件Addinput.js
```js
import React, { Component } from 'react'
export default class AddInput extends Component {
handleChange=(e)=>{
}
keydown=(e)=>{
if(e.keyCode==13){
this.props.add(e.target.value)
e.target.value=""
}
}
render() {
return (
<div>
<label> <input type="text" id="username" placeholder="请输入用户名" onChange={this.handleChange} onKeyDown={this.keydown}></input></label><br/>
</div>
)
}
}
兄弟组件通信
兄弟组件通信
主要思想就是发布事件(on 监听)和订阅事件(trigger 触发)。
创建event-Hub.js 在组件a和b中引入
event-Hub.js
let callbackLists = {}
let eventHub = {
trigger(eventName, data) {
let callbackList = callbackLists[eventName]
if (!callbackList) {
return
}
for (let i = 0; i < callbackList.length; i++) {
callbackList[i](data)
}
},
on(eventName, callback) {
if (!callbackLists[eventName]) {
callbackLists[eventName] = []
}
callbackLists[eventName].push(callback)
}
}
export default eventHub
组件a中
down=()=>{
EventHub.trigger("bianse","yellow")
}
render() {
return (
<div>
<button onClick={this.down}>点击</button>
</div>
)
}
组件b中
state={
color:'red'
}
componentDidMount(){
//接收子组件穿过类的颜色值
EventHub.on("bianse",color=>{
this.setState({
color
})
})
}
render() {
return (
<div>
<span style={{color:this.state.color}}>文本</span>
</div>
)
}