如何使用打字稿在Hoc中为html元素使用Ref

Posted 2023-02-21

【中文标题】如何使用打字稿在Hoc中为html元素使用Ref

【英文标题】：How to useRef in Hoc for html element using typescript

【发布时间】：2021-01-27 13:18:27

【问题描述】：

这是我的代码

import React,  FC, InputhtmlAttributes, useEffect, useRef  from 'react';

type TElementType = HTMLInputElement | HTMLTextAreaElement;
type TElementWithAttributes = InputHTMLAttributes<HTMLInputElement>;

interface Props 
  submitTouched: boolean;


const withInput = (Comp: FC<TElementWithAttributes>): FC<Props> => props => 
  const  submitTouched  = props;

  const refValue: React.RefObject<TElementType> = useRef(null);

  const updateErrors = (val: string) => 
    // handle errors
  ;

  useEffect(() => 
    if (submitTouched && refValue.current) 
      updateErrors(refValue.current.value);
    
  , [submitTouched]);

  const InputOrTextarea = (
    <>
      <Comp name="somename" type="text" value="somevalue" ref=refValue />
    </>
  );
  return InputOrTextarea;
;

export default withInput;

我在 ref=refValue 上遇到错误

键入'名称：字符串；类型：字符串；值：字符串；参考：参考对象； ' 不可分配给类型 'IntrinsicAttributes & TElementWithAttributes & children?: ReactNode; '。 类型'IntrinsicAttributes & TElementWithAttributes & children?: ReactNode; 上不存在属性'ref' '。

【参考方案1】：

ref 由React.DetailedHTMLProps 添加到 html 道具中，这就是您收到错误的原因。试试：

type TElementType = HTMLInputElement | HTMLTextAreaElement;
type TElementWithAttributes = React.DetailedHTMLProps<InputHTMLAttributes<TElementType>, TElementType>

Playground Link