はじめに
この記事では、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 を表示させない方法が良いのではないかと考えています。
最後に
いかがだったでしょうか？
今回のエラーの対策は他にもあるんじゃないかと考えていますが、筆者が思いついた対策を書かせていただきました。
もしよろしければ、他のエラー解決方法について、コメントで教えていただけると幸いです。🙇♂️
※ 「敬体」と「常体」どちらの文章にしようか悩んでます 😇
参考