$ cat posts/20240929-5mt2yc.mdx

propsの名前付けで発生したエラーと対処

2024-09-29 · #tech #typescript #mui

はじめに

この記事では、Button コンポーネントの props に付けた名前で発生したエラーの対処を紹介しています。

前回の引き続きです。前回の記事を読んだことを前提として書いていますので、よかったら前回の記事もご覧ください。

型でButtonのスタイルを切り替える方法を変更してみた。 - Qiitaはじめに親要素から Button コンポーネントに variant を渡して Button のスタイルを変更させていたものを下のように変更した。変更前:MUI の Button がデフォで持っていた variant によって Button のスタイルを変更させる方法...qiita.com

エラー内容

前回、props として渡していたuiをUiとキャメルケースに変更した際、下のようなエラーメッセージがブラウザに表示されました。

エラーメッセージ

Warning: React does not recognize the Uiprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseui instead. If you accidentally passed it from a parent component, remove it from the DOM element.

表示されたエラーメッセージを DeepL を使って日本語に翻訳した内容が下になります。

日本語に翻訳

React は DOM 要素のUiprop を認識しません。意図的にカスタム属性として DOM に表示させたい場合は、代わりに小文字のuiとしてください。誤って親コンポーネントから渡してしまった場合は、DOM 要素から削除してください。

props を DOM に表示させたい場合？

どうやら下の画像のように props として渡した要素は強制的に DOM に表示されてしまうようです。

DOMの名前に大文字は使えない.png

DOM で要素名を表示させたい場合、大文字は使えないことから発生したエラーでした。

対策

対策を 2 つご紹介します。

props 名に、小文字、スネークケースを利用する
DOMから props を除外する

props 名に、小文字、スネークケースを利用する

エラーが発生しない形に変更しましょう。DOM では、大文字が使えないので、名前を小文字に戻しましょう。

// props名を小文字で統一する
- <FooButton Ui={"primary"}>ui={"primary"}</FooButton>
+ <FooButton ui={"primary"}>ui={"primary"}</FooButton>

また、筆者がこの記事執筆中に試してみましたが、スネークケースでも、エラーは発生しませんでした。

// スネークケースを利用する
- <FooButton Ui={"primary"}>ui={"primary"}</FooButton>
+ <FooButton hoge_ui={"primary"}>ui={"primary"}</FooButton>

props名をスネークケースに変更した.png

`DOM`から props を除外する

続いて、props を DOM 上から除外する方法をご紹介いたします。

props の名前なんかでは、開発チーム内でキャメルケースや、パスカルケースを用いた命名で統一している場合もあることでしょう。

その場合、shouldForwardPropという props を使うことも一つの手段として有効です。

この props は、下のように使うことで、DOM から props を除外することができます。

// `shouldForwardProp`を利用してDOMからpropsを除外する方法
 const FooButton = styled(MuiButton)<FooType>`
-
    width: 200px;
    ...
  `;
 
 const FooButton = styled(MuiButton, {
+    shouldForwardProp: (prop) => prop !== "Ui",
  })<FooType>`
    width: 200px;
    ...
  `;