logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

React.forwardRef:把 ref 对象转给组件的后代

  • Graph Forwarding: 目的是透過graph属性将raft对象传递给组件的后代。
  • 文件建立: 创建app input.tsx文件放在src/app/components目录下,定义并导出一个名为AppInput的组件。
  • 组件内容: AppInput组件使用HTML的input元素,类型为text
  • 组件引用: 在AppHook组件中,顶部导入AppInput组件,视图中用它替换原有的text类型input
  • React Forward Ref: 若要在AppHook组件引用AppInput中的input元素,需使用React的forwardRef来处理。
  • Forward Ref实现: 导入forwardRef从React,将AppInput组件用forwardRef包裹,接受propsref参数,后者传递给input元素的ref属性,允许父组件引用此input元素。
  • 传递 Ref: 在使用AppInput时可以设置其ref属性,该值为一个创建的raft对象,将被传递到组件内部的input元素。