当前位置: 首页 > article >正文

React学习day03-components插件安装(仅基于火狐浏览器)、受控表单绑定、在React中获取dom、组件通信(组件间的数据传递)

7、components插件安装(仅基于火狐浏览器)

(1)点击“打开应用程序菜单”

(2)点击“扩展和主题”

(3)在“扩展”的“寻找更多组件”搜索“Components”,找到“React Developer Tools”

(4)点击“安装”

(5)在浏览器页面,右键“检查”

8、受控表单绑定(效果上类似于vue表单的双向绑定)

(1)作用:使用React组件的状态(useState)控制表单的状态

(2)步骤:

1)准备一个React状态值,将状态值绑定到表单的value属性上

2)通过value属性绑定状态,通过onChange属性绑定状态同步的函数,将表单的最新的value值设置给state

9、在React中获取dom

(1)工具:userRef函数

(2)步骤:

1)使用userRef获取ref对象,并用ref=“ref对象名”于JSX绑定

2)在DOM可用时(页面渲染完成之后),通过ref对象名.current获取DOM对象

10、组件通信(组件间的数据传递)

根据嵌套关系的不同,有不同的通信方法

已知:

(1)父子通信

1)父传子
①父组件在子组件标签上绑定属性,传递数据(假设传递数据为姓名)

②子组件通过props接收数据

2)父传子之props
①props可以传递任意数据(数字、字符串、布尔值、数组、对象、函数、JSX)

②props是只读对象(子组件只能读取使用props的数据,不能直接修改,否则会报错)(props中的父组件数据只能由父组件修改)

③children

当把内容嵌套在子组件的标签中,父组件会自动再命名为children的props属性值接收该内容

3)子传父

已知:

①父组件声明方法,再将函数传递给子组件

②给子组件绑定点击方法,将需要变化的值传递给父组件

③父组件可以在最初声明的函数中获取到子组件传递的值

(2)兄弟通信(通过父组件实现兄弟通信)

已知:

1)子1传父步骤
        ①定义父组件的函数

        ②父组件传递函数给子组件1

        ③子组件1通过解构获得函数,并传参给父组件

        ④检查子组件1是否成功传参给父组件

2)父传子2
        ①将父组件中的数据设为动态的(useState)

        ②父组件将数据传递给子组件2

        ③子组件2通过props进行接收,传递的值,然后渲染

(3)跨层通信(比如:爷孙关系、父子关系)(使用Context机制实现跨层级组件通信)

1)步骤:
        ①使用createContext方法创建一个上下文对象Ctx
        ②在顶层组件中通过上下文对象Ctx.Provider组件提供数据
        ③在底层组件中通过useContext钩子函数获取消费数据
2)示例(将父组件的name传给孙组件)

已知:

①导入createContext,创建一个上下文对象,用一变量接收

②调用创建的上下文对象,通过Provider提供标签将根组件的内容包裹起来

③通过useContext在孙组件中解析createContext创建的上下文对象,并使用


http://www.kler.cn/news/289116.html

相关文章:

  • 51单片机-串口通信关于SBUF的问题
  • elementui 表单 tab切换下个光标能不能改成enter键
  • 24数学建模国赛提供助攻(13——灰色系统理论)
  • 611.有效三角形的个数
  • 豆包MarsCode编程助手:让编程更简单
  • 七、场景加载
  • git中的分支是什么?分支有哪些好处?如何建立分支?
  • PyTorch Geometric(torch_geometric)简介
  • 行业首家!百度智能云通过中国信通院「H5 端人脸识别安全能力」测评
  • DORIS - DORIS注意事项(一)
  • C++:类的定义、实例化
  • Explorer++:轻量级高效文件管理器!!
  • 论文阅读:MicroNet: Towards Image Recognition with Extremely Low FLOPs
  • Linux命令 :更改文件或目录的组所有权的命令chgrp详解
  • FlyMcu和STLINK Utility使用
  • 【ORACLE】listagg() 函数
  • linux进程处理
  • Java 输入与输出之 NIO.2【AIO】【Path、Paths、Files】【walkFileTree接口】探索之【三】
  • Qt详解QParallelAnimationGroup并行动画组
  • 【2024 CCF编程能力等级认证(GESP)C++ 】 计算机基础知识
  • 三、 3020数控铣床 笔记
  • 中国科学院声学研究所博士招生目录
  • 昇思25天学习打卡营第33天|共赴算力时代
  • 双指针(1)_数组分块_移动零问题
  • 0903,LIST(merge,splice,sort,unique),SET(insert,erase)
  • Codeforces Round (Div.3) C.Sort (前缀和的应用)
  • uniapp上传文件时用到的api是什么?格式是什么?
  • 如何从 Mac 上清空的垃圾箱中恢复误删除的文件
  • linux find 之 文件、时间、权限、深度、删除
  • Android在子线程中更新UI