16React中组件的通信

1:父传子  使用props接受

新建一个Child7.js 里面写入

在App中引入和调用 以及数据的传递

运行就可以看见结果

2在子传父 通过调用子元素的事件来修复父元素的内容

核心:谁的数据  数据的修改方式就谁里面定义  别人只能调用   需要处理的 如果把声明好的方法传过去

num是属于App的  那么num修改的方式也属性App  传的App的方法给子组件

去修改子组件Child7.js

调用子组件的方法  去更新父组件中内容

在子组件加入一个文本框让用户输入 点击按钮 父组件的内容更新

还是刚才的原则  该的谁  方法定义在谁里面

改写App.js中 代码如下

import Child7 from "./Child7";

export default class App extends Component {
    constructor(props){
        super(props);
        this.state ={
            num:10,
            num1:0
        }
    }
    changeNum=(n)=>{
        this.setState({
            num1:n
        })
    }
    addNum=()=>{
        this.setState({
            num:this.state.num+1
        })
    }
    
    render() {
        return (
            <div>
                app中num的数据为{this.state.num}
                child7中的num1为:{this.state.num1}
                <Child7  num={this.state.num}  add={this.addNum} change={this.changeNum}></Child7>
            </div>
        )
    }
}

代码解释

在子组件中调用即可

也可以用ref直接进行子传父 效果如下 

代码如下

 

也可以方法 属性的修改 通过自身定义的方法 

在子组件中定义取值的方法

如果才能把这个方法给父元素使用??? 就传普通值传过去就可以了