React 进阶之路 五 ( 父组件 与 子组件相互传值 )

# 目标

image.png

如上图：

1. 点击 父组件 的 显示/隐藏子组件 按钮可控制子组件的显示
2. 点击 子组件 的 给父组件传值 按钮可向 父组件 传值并显示出来

# 父组件 向 子组件传值

// 父组件
class Parent extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            show: {display: 'block'},
            childMsg:''
        }
        this.btnClick = this.btnClick.bind(this);
    }
    // 定义 点击事件
    btnClick = (e)=>{
        this.state.show.display === 'none' 
            ? this.setState({show: {display : 'block'}}) 
            : this.setState({show: {display : 'none'}});
    }
    // 子组件调用
    childHandle = (msg)=>{
        console.log(msg)
    }
    // 渲染组件
    render(){
        return <React.StrictMode>
            <div style={{padding: ' 20px'}}>
                <button onClick={this.btnClick}>显示/隐藏 子组件</button> 
                <div style={{padding: '20px 0'}}> 这是子组件传过来的值: {this.state.childMsg} </div>
                <Child show={this.state.show} parentFn={this.childHandle} />
            </div>
        </React.StrictMode>
    }
}

// 子组件
class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    // 渲染组件
    render(){
        console.log( this.props.show )
        return <React.StrictMode>
            <div style={{width: '500px', height: '100px', background: '#ff00ff', marginTop: ' 10px', padding: ' 20px', display: this.props.show.display} }>
                我是子组件
            </div>

        </React.StrictMode>
    }
}

ReactDOM.render(
    <Parent></Parent>,
    document.getElementById('root')
);

如上图:

1. 定义两个组件分别为 父组件 Parent 和 组件 Child
2. 父组件定义 state.isShow 用来控制子组件的 显示/隐藏。
3. 子组件定义 props.show 用来接收父组件传过来的值 。
4. 点击父组件按钮更新 state.isShow 时，会实时把数据传递给子组件，即实现了子组件的 显示/隐藏。

# 子组件 向 父组件传值

// 父组件
class Parent extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            childMsg:''
        }
    }
    // 子组件调用
    childHandle = (msg)=>{
        this.setState({childMsg: msg})
    }
    // 渲染组件
    render(){
        return <React.StrictMode>
            <div style={{padding: ' 20px'}}>
                <div style={{padding: '20px 0'}}> 这是子组件传过来的值: {this.state.childMsg} </div>
                <Child parentFn={this.childHandle} />
            </div>
        </React.StrictMode>
    }
}

// 子组件
class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    // 渲染组件
    render(){
        return <React.StrictMode>
            <div style={{width: '500px', height: '100px', background: '#ff00ff', marginTop: ' 10px', padding: ' 20px', display: this.props.show.display} }>
                我是子组件 
                <button onClick={()=> this.props.parentFn('我是子组件传过来的')}> 给父组件传值 </button>  
            </div>

        </React.StrictMode>
    }
}

ReactDOM.render(
    <Parent></Parent>,
    document.getElementById('root')
);

如上图：

1. 父组件把方法通过子组件的 props.parentFn 传递给子组件。
2. 子组件通过调用父组件传过来的函数，来向父组件传值。
3. 原理很简单就是把方法传递给了子组件，这样子组件就可以调用父组件的方法来进行相应的操作了。

小伙伴赶快试试吧，记得点赞哦~~