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传给孙组件)
已知: