一、状态提升
使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。
原理：父组件基于属性把自己的一个fn函数传递给子组件，子组件在某些操作下把fn执行，在执行fn的过程中把父组件中的一些属性信息进行了修改，从而影响相关子组件的重新渲染。
直接看代码
<Vote title={'标题一'}></Vote> //调用
vote.js文件
import React from 'react';
import VoteHeader from './voteHeader.js'
import VoteBody from './voteBody.js'
import VoteFooter from './voteFooter.js'
class Vote extends React.Component{
constructor(){
super()
this.state = {
n: 0,
m: 0
}
}
handleNum = (type)=> {
if (type === 1) {
this.setState({
n: this.state.n+1
})
} else {
this.setState({
m: this.state.m+1
})
}
}
render() {
let {title} = this.props;
let {n, m} = this.state;
let {handleNum} = this;
return (
<div>
<VoteHeader title={title}></VoteHeader>
<VoteBody n={n} m={m}></VoteBody>
//将父组件函数传递给子组件调用
<VoteFooter handleNum={handleNum}></VoteFooter>
</div>
)
}
}
export default Vote;
VoteHeader.js文件
import React from 'react';
class VoteHeader extends React.Component{
constructor(){
super()
}
render() {
let {title} = this.props;
return (
<div>{title}</div>
)
}
}
export default VoteHeader;
VoteBody.js文件
import React from 'react';
class VoteBody extends React.Component{
constructor(){
super()
}
render() {
let {n, m} = this.props;
return (
<div>
<div>赞成{n}票</div>
<div>反对{m}票</div>
</div>
)
}
}
export default VoteBody;
VoteFooter.js文件
import React from 'react';
class VoteFooter extends React.Component{
constructor(){
super()
}
render() {
let {handleNum} = this.props;
return (
<div>
//这个地方通过操作父组件函数改变父组件的属性值
<button onClick={e => handleNum(1)}>赞成</button>
<button onClick={e => handleNum(0)}>反对</button>
</div>
)
}
}
export default VoteFooter;