React的组件通信:
父===>子通信 : 父组件将属性(props)传递给子组件
子===>父通信 :调用父组件传递过来的方法去实现。传递的数据放在参数里面
(父组件将一个改变自身状态的方法传递给子组件,子组件去调用的同时将一些参数传给它)
下面通过一个案例的两种方式讲解组件之间的通信和状态提升问题。
状态提升也就是将state写在父组件里,方便进行管理使用。
这是将状态放在父组件里
import React, { Component } from 'react'
import Todolist from '../todolist/'
import Txt from '../txt'
export default class index extends Component {
constructor() {
super()
this.state = {
//父组件定义状态
list:[]
}
}
//data是Txt组件传递的值
add = data => {
this.setState({
list:[...this.state.list,data]
})
}
render() {
return (
<div>
{/* 通过向子组件传递事件修改state的值 */}
<Txt add={this.add}/>
//子组件通过this.state.list取值
<Todolist list={this.state.list}/>
</div>
)
}
}
在子组件中使用:
Todolist组件
import React, { Component } from 'react'
export default class index extends Component {
render() {
//子组件通过props取值父组件传递过来的
let {list} = this.props
return (
<div>
<ul>
{
list.map((item,index)=> {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
}
Txt组件
import React, { Component } from 'react'
export default class index extends Component {
input = (e) => {
if(e.keyCode === 13) {
//解构出父组件的函数
let {add} = this.props;
// 调用父组件的事件并传递值
add(e.target.value)
e.target.value = ''
}
}
render() {
return (
<div>
<input onKeyUp={this.input} type="text"/>
</div>
)
}
}
下面是没有进行状态提升:
状态由子组件自己管理:
父组件
import React, { Component } from 'react'
import List from '../list'
import Txt from '../txt'
export default class index extends Component {
// 非提升状态
//父组件向Txt组件传递方法
change = (data) => {
//调用父组件change方法时调用List组件方法修改List的state
this.add.change(data)
}
render() {
return (
<div>
//向Txt组件传递方法
<Txt add={this.change}/>
//通过ref绑定DOM
<List ref={el=>this.add=el}/>
</div>
)
}
}
List组件
List组件
import React, { Component } from 'react'
export default class index extends Component {
constructor() {
super()
this.state = {
list:[]
}
}
// 改变state的方法
change = (data) => {
this.setState({
list:[...this.state.list,data]
})
}
render() {
return (
<div>
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
}
Txt组件
Txt组件
import React, { Component } from 'react'
export default class txt extends Component {
add = (e) => {
if(e.keyCode===13) {
console.log(this.props)
//解构出父组件传递的方法
let {add} = this.props
//调用父组件的方法
add(e.target.value)
e.target.value=''
}
}
render() {
return (
<div>
<input type="text" onKeyUp = {this.add}/>
</div>
)
}
}
通过上面的对比 我们可以发现 状态提升更为方便,由父组件管理状态。