web-dev-qa-db-ja.com

React Hook Useref）スタイル付きコンポーネントとTypeScriptの操作ではありません。

スタイル化されたコンポーネントでuseRefフックを使用しているいくつかの問題です。

LINTERは、DIDMOUNT useEffectの内側に_Object is possibly 'null'_を警告します。これについての考えは？

これは2つの理由で重複していません。

  • 古い回答は、クラスコンポーネントで使用されているrefを参照しています。これはReactフックの前に使用する唯一の方法でした。
  • innerRef propは、現在のバージョンのスタイルのコンポーネントではサポートされていません。

これが私のコンポーネントのスニペットのサンプルです。

_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}/>
  );
}
_
reactjstypescriptreact-hooksstyled-components
11
vlk

INPUTERFをUSEEFFECTの配列引数に渡して、その機能が正しいかどうかを確認してください。refの.currentを持つことが保証されていないため、InputRefが変更されるたびにエフェクトを実行する必要があります。

0
Carwyn Stephen