老师，请问如何让组件支持 ref 属性？

Question

Answer 1

张轩 2020-07-12 21:26:10

同学可以试一试 https://zh-hans.reactjs.org/docs/forwarding-refs.html 转发 ref，我简单试了一下，是没有问题的，你可以按它的步骤走就好啦。写了简单的伪代码 你可以看看欧

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {     return      <input         ref={ref}         className="viking-input-inner"         disabled={disabled}         {...restProps}     /> })   // 使用 const DisabledInput = () => {     const nodeRef = useRef<null | HTMLInputElement>(null)     return (         <Input             placeholder="disabled input"             ref={nodeRef}             disabled          />       ) }

• 提问者 慕侠0187444 #1

  [赞] 谢谢老师，原来react官网就有，之前没看到。

Answer 2

香饽饽0 2020-07-07 12:26:10

这只是你编辑器监测 ts 报错，ref的类型和传入的类型不同，因为你还没有传值

• 提问者 慕侠0187444 #1

  我想让自己写的 Input 组件支持 ref 属性 并且绑定的 ref指向的 是 Input 组件里面的 <input>