2021/04/11

ReactでSPAを開発していたところ，Warning: validateDOMNesting(...): <input> cannot appear ...という警告が表示された．

はじめは訳がわからなかったが，最終的には解決できた．

<tr>直下に<input>タグを入れるのはやめ，<td>を一度はさもう！

Warning: validateDOMNesting(...): <input> cannot appear as a child of <tr>.
    at input
    at tr
    at table
    ... # この先は，ネストされたコンポーネントが順に表示される

以下の文は，

Warning: validateDOMNesting(...): <input> cannot appear as a child of <tr>.

「<tr>の下に<input>は入れられないよ！」みたいなことを言っている．

実は，警告が出ているが，アプリの見た目自体は希望通りに表示されており，何が問題なのかわからなかった．

しかし，よくよく探ってみると，<tr>の下に<td>を入れなければならないようで，以下のように変更を加えた．

<tr>
  <td>hogehoge</td>
  <input />
</tr>

↓

<tr>
  <td>hogehoge</td>
  <td>
    <input />
  </td>
</tr>

以上で，上述した警告は表示されなくなった．

<tr>の下に<input>があるのが問題なのかと思い，<tr>を消して<table>の下に<input>が来るようにしたところ，以下の警告が出力された．

Warning: validateDOMNesting(...): <input> cannot appear as a child of <table>.

これを踏まえると，<table><tr><td>の下に<input>を入れなくてはならないらしい．