react学习(6)

简介: 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>
    }
    
相关文章
|
16天前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
35 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
24天前
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
|
16天前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
24 0
|
29天前
|
前端开发 JavaScript
react学习(5)
react学习(5)
177 59
|
28天前
|
前端开发
react学习(7)
react学习(7)
118 45
|
16天前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
16 2
|
23天前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
24天前
|
前端开发
react学习(15)函数式组件中使用props
react学习(15)函数式组件中使用props
|
19天前
|
前端开发
react学习(22)高阶函数和函数柯里化
react学习(22)高阶函数和函数柯里化
|
23天前
|
存储 前端开发 容器
react学习(18)createRef形式的ref
react学习(18)createRef形式的ref

热门文章

最新文章