React hook useRef 不适用于样式组件和打字稿

Question

我在使用useRef带有样式组件的钩子时遇到了一些问题。

Linter 提醒我Object is possibly 'null'在 didMount 中useEffect。对此有什么想法吗？

这不是重复的有两个原因：

• 旧的答案是指ref在类组件中使用的，这是在 React 钩子之前使用它的唯一方法，
• 该innerRef道具是不是在风格组件的当前版本支持了。

这是我的组件的示例片段：

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  background: transparent;
`

const MyForm = () => {
  const inputRef = useRef(null);
  
  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus(); //Object is possibly 'null'
    }
  }, []);

  return (
    <StyledInput ref={inputRef}/>
  );
}

Answer 1

我终于找到了解决方案：

const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;

这个对我有用：

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
  background: transparent;
`

const MyForm = () => {
  const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;

  useEffect(() => {
    if (inputRef && inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <StyledInput ref={inputRef}/>
  );
}

Answer 2

作为当前接受的答案的替代方案，您还可以执行以下操作：

const inputRef = useRef<HTMLInputElement>(null);