はじめに

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

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

エラー内容

前回、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 で要素名を表示させたい場合、大文字は使えないことから発生したエラーでした。

対策

対策を 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>

`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;
    ...
  `;

ブラウザで確認すると、これまで DOM に表示されていた、ui="primaryがbuttonから消えていることがわかります。

開発チームの命名ルールに沿って名前付けできるため、shouldForwardPropを使って DOM に props を表示させない方法が良いのではないかと考えています。

最後に

いかがだったでしょうか？

今回のエラーの対策は他にもあるんじゃないかと考えていますが、筆者が思いついた対策を書かせていただきました。

もしよろしければ、他のエラー解決方法について、コメントで教えていただけると幸いです。🙇‍♂️

※ 「敬体」と「常体」どちらの文章にしようか悩んでます 😇

参考