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<HTMLInputElement>(null);

Answer 2

在useEffect的数组参数中传递inputRef，让我们看看它是否有效，不能保证您的ref中有一个.current，因此每次inputRef更改时都应运行效果

Answer 3

我终于找到了解决方案：

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}/>
  );
}

反应挂钩useRef不适用于样式组件和打字稿

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

3 个答案: