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

Question

Answer 1

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

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

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>