《六》组件通信之使用 Props 进行父子组件间通信

常用的组件间通信方式：

1. props 方式：一般用于父子组件通信。。
2. Context 方式：一般用于祖孙组件通信。
3. 集中式状态管理 Redux：一般用于很多组件间都要共享数据的情况。

父组件通过 props 向子组件传递数据：

父组件中，通过给子组件绑定 属性名=属性值 的方式来给子组件传递数据；子组件中，通过 props 参数来获取父组件传递过来的数据。

// Parent.js
import Child from "./Child.js";
class Parent extends React.Component{
    render(){
        return(
            <div>
            	{/* 父组件中，通过给子组件绑定属性名=属性值的方式来给子组件传递数据 */}
                <Child content = '父组件向子组件通信' />
            </div>
        )
    }
}

// Child.js
class Child extends React.Component{
    render(){
        return(
        	{/* 子组件中，通过 props 参数来获取父组件传递过来的数据 */}
            <div>{this.props.content}</div>
        )
    }
}

子组件主动触发父组件的方法，向父组件传递数据：

父组件通过 props 给子组件传递一个回调函数，子组件调用这个函数向父组件传递数据。

// Parent.js
import Child from "./Child.js";
class Parent extends Component{
	handleChange(val){
		console.log(val) // 这是是子组件传给父组件的值
	}
    render(){
        return(
            <div>
            	// 父组件通过 props 给子组件传递一个回调函数
                <Child onChange={this.handleChange} />
            </div>
        )
    }
}

// Child.js
class Child extends Component{
	handleClick(){
		// 子组件调用父组件传递过来的回调函数向父组件传递数据
		this.props.onChange(‘这是是子组件传给父组件的值’)
	}
    render(){
        return(
           <button onClick={this.handleClick}>按钮</button>
        )
    }
}

父组件主动触发子组件的方法，获取子组件的数据：

// Parent.js
import Child from "./Child.js";
class Parent extends Component{
	childRef = React.createRef()
	
	handleClick(val){
	    //父组件触发子组件方法
		this.childRef.current.handleChange() 	
	}
    render(){
        return(
            <div onClick={this.handleClick}>
            	// 父组件通过 props 把方法传递给子组件
                <Child ref={this.childRef} />
            </div>
        )
    }
}

// Child.js
class Child extends Component{
	handleChange(){
		// 子组件执行逻辑操作
		...
		
		// 子组件返回数据，传递给父组件
		// return {}
	}
    render(){
        return(
           <button onClick={this.handleChange}>按钮</button>
        )
    }
}