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

Question

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

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

这不是重复的，原因有二：

旧答案指的是 class 组件中使用的 ref，这是在 React hooks 之前使用它的唯一方法，
当前版本的样式化组件不再支持 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

在 useEffect 的数组参数中传递你的 inputRef 让我们看看它是否有效，你不能保证你的 ref 中有一个 .current，所以你应该每次都运行效果inputRef 变化

Answer 2

我终于找到了解决办法：

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 3

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

const inputRef = useRef<HTMLInputElement>(null);

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

React hook useRef not working with styled-components and typescript

typescript

reactjs

styled-components

react-hooks

这不是重复的，原因有二：