1. 前言

框架类的都少不了 组件间的传值
父子组件 兄弟组件等
先来梳理个 父 改子

---

2. 需求

点击 父组件内的按钮 ,修改数据,子组件跟随变化
点击子组件内的按键 ,父组件数据也修改

1.gif

极简插件 很多浏览器的调试插件安装比较麻烦,这个安装起来非常方便,需要的可以试试

---

3. 父传子 -----子组件

类组件用的比较多
构造函数不是必须的

  class Child extends React.Component {
            render() {
                return (<div>
                    <h2>  子-child---{this.props.num} </h2>
               </div> )
            }
        }

---

4. 父组件-传值-子组件

1. state 定义一个 变量
2. 父传子 和 vue类似 通过 属性传值
3. 父组件 点击事件 箭头函数 里面 修改 state
4. this的问题 以后就默认你懂了,不在详细讲解
5. setState()修改 数据 和小程序 类似

class App extends React.Component {
            constructor(){
                super();
                this.state={
                    app_num:0
                }
            }
            render(){
                return(
                    <div>
                    <h1> App </h1>  
                    <button onClick={()=>{this.increase()}}>父-app-btn </button>
                    <Child  num={this.state.app_num}/>  
                    </div>
                )
            }
            increase(){
                this.setState({
                    app_num: this.state.app_num +1
                })
            }
        }

---

5. 子组件 修改父组件数据 --子组件

直接在上边 的子组件 基础上 进行修改就行
就加了一个点击事件
其实这个思路和 vue是一样的, 通过回调函数来修改

因为子组件不能修改 父组件的数据 ,那就只能通过 传值的时候,把父组件的修改函数 像普通传参一样传过来

js里面本身函数也是一种数据类型嘛
可以想象 这个add 应该就是 父组件的修改函数

  class Child extends React.Component {
            render() {
                return (<div>
                    
                    <h2> 子-- child---{this.props.num} </h2>
                    <button onClick={this.props.add}> 子--- child-btn</button>
               </div> )
            }
        }

---

6. 父组件

在上边的 父组件基础上进行修改就行
主要 问题还是 this指向 ,怎么才 能在 子组件里面 还让 this指向父组件,
因为这个 修改函数 只有在父组件的this上才有

传值的时候通过 bind 直接绑定 this

 render(){
                return(
                    <div>
                    <h1> App </h1>  
                    <button onClick={()=>{this.increase()}}>父--app-btn </button>
                    {/* props传递
                         父组件的 修改函数 作为参数 传给子组件 
                     只有保证this指向父组件,那么子组件修改的就是父组件的数据
                    
                      vue是通过事件 传递
                    */}
                    <Child  num={this.state.app_num} add={this.increase.bind(this)}/>  
                    </div>
                )
            }

---

参考资料

极简插件

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉