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

Posted 2023-03-13

【中文标题】React hook useRef 不适用于样式化组件和打字稿

【英文标题】：React hook useRef not working with styled-components and typescript

【发布时间】：2020-01-22 20:51:07

【问题描述】：

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

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

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

旧答案是指在类组件中使用的ref，这是在 React 钩子之前使用它的唯一方法， 当前版本的样式化组件不再支持 innerRef 属性。

这是我的组件的示例 sn-p：

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

【问题讨论】：

@MatthewBarbara innerRef 不再被样式化组件支持

【参考方案1】：

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

【参考方案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/>
  );

【讨论】：

您实际上可以在输入参数中传递HTMLInputElement：const inputRef = <HTMLInputElement>useRef() 而不是使用as

我不断收到错误消息“无法为函数组件提供引用。尝试访问此引用将失败。您是要使用 React.forwardRef() 吗？”

useRef 有一个泛型允许将类型另外修改为默认值：const inputRef = useRef<HTMLInputElement>() 导致React.MutableRefObject<HTMLInputElement | null | undefined>。

你如何在纯 javascript 中做到这一点？

【参考方案3】：

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

const inputRef = useRef<HTMLInputElement>(null);