父子通信

父组件向子组件传值

【Props】双向绑定

这是最常见的react组件之间传递信息的方法了吧，父组件通过props把数据传给子组件，子组件通过this.props去使用相应的数据

父组件

class App extends React.Component{
  render(){
    return(
      <div>
        <Children name="父向子"/>
      </div>
    )
  }
}

子组件

class Children extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div>这是：{this.props.name}</div> 
    )
  }
}

【ref】（父传子）

• 父组件使用ref属性对子组件做标记，获取到子组件的实例或者dom元素，可以调用子组件的方法，传递数据。
• 在 React 最新的版本中，要使用 ref ，需要通过 React.createRef() 方法生成一个ref

案例

A组件

import React, {createRef} from 'react'
import B from './B'
//父组件
const A = () => {
  const childComp = createRef()
  const clickHandle = () => {
    childComp.current.childClickHandle("beijing")
  }

  return (
    <div>
      <h2>A组件</h2>
        <button onClick={()=>clickHandle()}>按钮</button>
 
        <B ref={childComp}></B>
      </div>
    )
}

export default A

B组件

import React, { Component } from 'react'

//子组件
export default  class B extends Component{
  state={
    name:"admin"
  }
  childClickHandle=(city)=>{
    this.setState({
      address:city
    })
  }

  render(){
    return (
      <>
        <h2>B组件</h2>
         <div>name:{this.state.name},address:{this.state.address}</div>
      </>
     
    )
  }
}

注意

• 挂到组件(class声明的组件)上的 ref 表示对组件实例的引用。
• 不能在函数式组件上使用 ref 属性，因为它们没有实例。
• 挂载到dom元素上时表示具体的dom元素节点。

子组件向父组件传值（回调函数）

父组件

class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      bgcolor:'pink'
    }
  }
  bgChange(color){
    this.setState({
      bgcolor:color
    })
  }
  render(props){
    <div style={{background:this.state.bgcolor}}>

  <Children 
    bgcolor={this.state.bgcolor}                   // 给子组件传递的值 color
    changeColor={(color)=>{this.bgChange(color)}}  // changeColor 子组件的参数=color 当做形参
  /> 
                    
</div>

} }

子组件
```js
class Children extends Component{
  constructor(props){
    super(props);
  }
  handerClick(){
    this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样
  }
  render(){
    return(
      <div>
        
        <div> 
          父组件的背景色{this.props.bgcolor} // 子组件接收父组件传过来的值 bgcolor
        </div> 
        <button 
          onClick={(e)=>{this.handerClick(e)}} // 子组件执行函数
        >
          改变父组件背景
        </button> 
      </div>
    )
  }
}

链接

引用地址：react 中父传子，子传父，以及兄弟组件传参问题