react学习（6）

1: 组件通信
组件通信就是组件之间传递数据，根据组件嵌套关系的不同，有不同的通信方法。

image.png

• 父传子
  1：父组件传递数据；在子组件标签上绑定数据
  2：子组件接收数据；子组件通过props接收数据

function Son(props){
  return <div>{props.name}</div>
}

function App(){
  const name ='this is app name';
  return (
    <div><Son name={name}></Son></div>
  )
}

props说明：
1：props可以为任意值：数字，字符串，布尔值，对象，数组，函数，jsx等
2：props是只读对象：子组件只能读取props中的数据，不能直接进行修改，父组件的数值只能父组件修改。
3：特殊的props :children

function Son(props){
  console.log(props.children);
}
<Son><span>这是一个span</span></Son>

• 子传父
  核心思路：在子组件中调用父组件传递过来的函数，并传递实参

//子组件
function Son({onGetSonMsg}){
  const sendMsg ='this is son msg';
  return <button onClick={()=>onGetSonMsg(sendMsg)}>发送</button>
}
//父组件
function App(){
  const getMsg=(msg)=>{
      console.log(msg);
  }
  return <div><Son onGetSonMsg={getMsg}></Son></div>
}