react悬案，组件间通信巨坑

Bertha 。 2023-10-04 14:54 18阅读 0赞

#### 文章目录 ####

*   *   *  1. 父组件
         *  2. 子组件
         *  3. 期望结果
         *  4. 实际结果
         *  5.原因分析
         *  6. 解决办法
         *  7. 最后的代码

--------------------

*  事情的起因是这样的， 在一个小业务中，需要使用到`react`开发，希望子组件通过父组件控制是否渲染，本来是一个很简单的业务，但是在实际开发确到处碰壁，比如父组件的值发生了变化，但是子组件收到的值与父组件发生变化的值却不一样，千古奇案。

> 当使用Vue开发的小菜鸟遇上了react的巨坑！！！

还是直接上代码吧

#### 1. 父组件 ####

import {
        Component
    } from 'react';
    import './RightClick.css';
    import Add from '../Add/Add';
    
    class RightClick extends Component{
        state = {
            show: false
        }
        
        componentDidUpdate(){
            console.log('R组件发生变化',this.state.show)
        }
        render(){
            return(
                <div id='box' >
                    <ul id='menu'>
                        <li className='menuItem' onClick={ () => this.setState({show:true}) }>添加</li>
                    </ul>
                    <Add show={this.state.show}/>
                </div>
            )
        }
    }
    
    export default RightClick

#### 2. 子组件 ####

import {
        Component
    } from 'react';
    
    import propTypes from 'prop-types';
    import './Add.css'
    export default class Add extends Component{
      
        static propTypes = {
            show: propTypes.bool.isRequired
        }
        state = {
            show: this.props.show
        }
         componentDidUpdate(){
            console.log('show=',this.state.show)
        }
        render(){
            return(
                !this.state.show 
                ? null
                :
                <div className="add">
                    <div className="val">
                        <label htmlFor='name'>名称：</label><input id='name' placeholder='请输入财物的名字' />
                        <br />
                        <label htmlFor='value'>价值：</label><input id='value' placeholder='请输入财物的价值'/>
                    </div>
                    <div className="btn">
                        <button >确认添加</button>
                          
                        <button onClick = {e=>this.setState({show:false})} >取消添加</button>
                    </div>
                </div>
            )
        }
    }

#### 3. 期望结果 ####

*  通过父组件的点击事件更改`state`,触发组件更新，然后更新传给子组件的`props`

#### 4. 实际结果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]

--------------------

![在这里插入图片描述][2021053016385521.png]

--------------------

*  [贴个react生命周期图][react]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]

--------------------

*  讲道理的话，`setState以及new props都是触发componentDidUpdate`的，但是为什么，父子收的值不一样呢？？？

--------------------

#### 5.原因分析 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]

#### 6. 解决办法 ####

*  父组件直接传给子组件一个方法，子组件调用父组件的方法

#### 7. 最后的代码 ####

*  父组件

import {
        Component
    } from 'react';
    import './RightClick.css';
    import Add from '../Add/Add';
    
    class RightClick extends Component{
        state = {
            show: false
        }
    
        render(){
            return(
                <div id='box' >
                    <ul id='menu'>
                        <li className='menuItem' onClick={ () => this.setState({show:true}) }>添加</li>
                    </ul>
                    <Add show={this.state.show} change = {e=>{this.setState({show:false})}} />
                </div>
            )
        }
    }
    
    export default RightClick

*  子组件

import {
        Component
    } from 'react';
    
    import propTypes from 'prop-types';
    import './Add.css'
    export default class Add extends Component{
        static propTypes = {
            show: propTypes.bool.isRequired,
            change: propTypes.func.isRequired
    
        }
        render(){
            return(
                !this.props.show
                ? null
                :
                <div className="add">
                    <div className="val">
                        <label htmlFor='name'>名称：</label><input id='name' placeholder='请输入财物的名字' />
                        <br />
                        <label htmlFor='value'>价值：</label><input id='value' placeholder='请输入财物的价值'/>
                    </div>
                    <div className="btn">
                        <button >确认添加</button>
                          
                        <button onClick = {e=>this.props.change()} >取消添加</button>
                    </div>
                </div>
            )
        }
    }

--------------------

未完待续。。。

*  2021-5-30

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210530163827597.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[2021053016385521.png]: https://img-blog.csdnimg.cn/2021053016385521.png
[react]: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210530164232950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210530173639318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70