Reactを書いていたら以下のようなWarningエラーが
Consoleに出たので備忘録として残しておく
今回出現したエラー文
Consoleに、以下のようなエラー文が出力された
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>
エラー文をDeepLで翻訳すると・・・
<div>は<p>の子孫として表示できません
ん？どういうこと？
エラーの原因
先ほどのエラー文は
「HTMLの入れ子のルール」に関するエラー
今回は、pタグの中にdivタグを
入れ子にしているからWarningエラーが起きています
pタグの中にdivタグを
入れ子にすることはできないからです
解決方法
Reactの場合は関数コンポーネントの
returnでJSXを返している箇所のコードを見て
以下のような
HTMLの構成になっていないか確認する
const Sample = () => {
return (
<p>
<div>pタグにdivは入れられない</div>
</p>
)
}
もしこのような構成になっているコードを確認したら
以下のようにHTMLの構成を変更してあげればOKです！
const Sample = () => {
return (
<div>
<p>divタグにpタグは入れられる</p>
</div>
)
}
これで解決できるはずです！
ところで、なぜpタグにdivタグは入れられないのか？
この質問に対する回答としては
HTML5から「ブロック要素」と「インライン要素」
という概念が廃止されて
入れ子のルールが「コンテンツモデル」
という概念で決まるようになったからです
コンテンツモデルとは**「その要素にはどのカテゴリーのコンテンツを入れていいか」を決めているルールのことで、タグの入れ子のルールは全てこの「コンテンツモデル」**で決まっています
だからpタグの中にdivタグを入れると**「あなたの書いたコードはコンテンツモデル的におかしいよ。なので警告出しとくから直してね」**というWarningエラーが出たんですね。Reactは優しい！
この話題に関する詳しい説明は
この記事が非常にわかりやすいです。
暇な時に軽く目を通しておくと
HTMLをより深く理解できるのでおすすめです！