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>
        )
    }
}

代码解释