- 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
包裹,接受props
和ref
参数,后者传递给input
元素的ref
属性,允许父组件引用此input
元素。 - 传递 Ref: 在使用
AppInput
时可以设置其ref
属性,该值为一个创建的raft对象,将被传递到组件内部的input
元素。