使用react时,如果我们将层级划分的很清楚,那么就会经常出现子级组件更改父级组件状态的情况,而这种情况并不能单单由redux来解决,那么要怎么样方便快捷的实现这种需求呢?
其实说来也很容易,
简单地说就是在父级元素调用子级元素时,将子级需要改变父级的状态包装成一个函数,带入到子级元素中,再由子级来调用...
看上去可能有点绕,我们来看一个简单的列子
import React,{ Component } from 'react'; export default class Super extends Component { constructor(props) { super(props); this.state = { open: false } } handleOpen () { this.setState({open: true}) } handleClose () { this.setState({open: false}) } render() { var show = this.state.open ? {display: 'block'} : {display: 'none'}; return ( <div> <div style={show}> 看得见吗? </div> </div> ) } }
这是一个父级元素,我们可以通过更改state的值来显示文字,
那么当我们需要通过子级来更改这个状态的时候就可以这样
import React,{ Component } from 'react'; // 父级元素 export default class Super extends Component { constructor(props) { super(props); this.state = { open: false } } handleOpen () { this.setState({open: true}) } handleClose () { this.setState({open: false}) } render() { var show = this.state.open ? {display: 'block'} : {display: 'none'}; return ( <div> <div style={show}> 看得见吗? </div> <Suber show={this.handleOpen()} hidden={this.handleClose()} /> </div> ) } } // 子级元素 class Suber extends Component { constructor(props) { super(props) } /* 接收父级带入的方法供给子级使用 */ openState () { this.props.show() } closeState () { this.props.hidden() } render() { return ( <div> <button onClick={this.openState.bind()}>开</button> <button onClick={this.closeState.bind()}>关</button> </div> ) } }
将父级的改变状态包装成两个function,然后传递给子级,这样子级元素就可通过父级传给它的方法来调用更改父级的状态啦
看上去很复杂,其实实现起来还是很简单的,嘿嘿...