React学习笔记04

一、理解组件通信

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

在Vue中组件通信是我们组件间传递数据的一种最常用的方法，我们在Vue中使用props来实现父传子，用$emit实现子传父，在React中如何实现呢？

1.1、父传子：

1、父组件传递数据：在子组件标签身上绑定属性

2、子组件接收数据：props的参数

function Son(props){ 
  return 
{props.name}
}

function App(){
  const name = 'this is app name'

  return (
    
  )
}

这和Vue的父传子几乎算得上是一模一样，不仅写法差不多，props传递的数据类型要求也是基本相同，唯一不同的是React中的props可以传递JSX

1.2、父传子-特殊的prop children

当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容

是不是看起来比较抽象？在代码中表现如下：

    this is span

这玩意怎么越看越眼熟，这不就是Vue中的插槽吗？

function Son(props){ 
  return 
{props.children}
}

function App(){
  const name = 'this is app name'

  return (
    
        this is span
    
  )
}

1.3、子传父

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

function Son({onGetMsg}){
  const sonMsg='this is son Message'
  return 
onGetMsg(sonMsg)}>
}

function App(){
  const getMsg=(msg)=>{
    console.log(msg);
  }
  return (
    
  )
}

那么如何存储子组件拿来的数据呢？这里可以创建一个状态变量，然后在getMsg方法中调用setmsg方法赋值

function Son({ onGetMsg }) {
  const sonMsg = 'this is son Message'
  return 
 onGetMsg(sonMsg)}>
}

function App() {
  const [msg, setmsg] = useState("")
  const getMsg = (msg) => {
    // console.log(msg);
    setmsg(msg)
  }
  return (
    

      {msg}
      
    

  )
}

至此，父子组件通信的基础使用介绍完了，敬请关注下一章：父子组件通信的高级使用