[レスポンス,TS]を使用してRefを転送するときに発生するコンポーネント定義is missing displaynameの問題

9046 ワード
typescript React テキストリンク

問題の状況


Reactを使用する場合は、内部HTML領域にアクセスできるようにrefをサブコンポーネントに渡す必要があります.このとき使用したのはReact.forwardRef
const Input = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});
タイプスクリプトを使用しない場合、上記の方法は正常に動作します.ただし、タイプスクリプトを使用している場合は、上記のコードが投げ出されますComponent definition is missing display nameエラーです.(forwardRef()関数を呼び出すときに匿名関数をスキップした場合、ブラウザはreact developerツールを使用するときに構成部品の名前を与えないため、エラーと呼ばれます.)

解決策


「react developer」ツールで、forwardRef()関数を使用して構成部品の名前を付ける方法:
  • 匿名関数を渡さずに命名関数を渡す方法
    • import React from "react";

interface InputProps {
	// ...
}

// eslint-disable-next-line prefer-arrow-callback (린트 에러 무시를 위해 추가해야한다.)
const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {
  return <input type="text" ref={ref} />;
});

export default Input;
  • forwardRef()displayNameで関数呼び出しの結果を設定する方法
    • import React from "react";

interface InputProps {
	// ...
}

const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {
  return <input type="text" ref={ref} />;
});

Input.displayName = "Input";

export default Input;
  • forwardRef()関数呼び出しの結果を使用して既存の構成部品を置き換える方法
    • import React from "react";

interface InputProps {
	// ...
}

function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {
  return <input type="text" ref={ref} />;
}

Input = forwardRef(Input);

export default Input;

    参考文献


    https://www.daleseo.com/react-forward-ref/
    https://stackoverflow.com/questions/67992894/component-definition-is-missing-display-name-for-forwardref
    JSON.stringify
    ビデオ認識で走行