<input>は、<tr>の子として出現することはできません

Question

<input>要素、具体的にはチェックボックスをテーブルに追加します。以下の作品：

<tbody key={rule._id}> 
    <tr> 
    <td>{rule.deviceId}</td> 
    { 
     <input 
     name="isEnabled" 
     type="checkbox" 
     checked={rule.enabled} 
     /> 
    } 
    <td>{rule.name}</td> 
    </tr> 
</tbody> 

しかし、それはコンソールにエラー生成：<input> cannot appear as a child of <tr>

これを行うための「正しい」方法はありますか？

Answer 1

<input>を<td>に入れます。

Answer 2

trは、tdのみを含むことができます。 tdにinputをラップできますか？

<tbody key={rule._id}> 
    <tr> 
    <td>{rule.deviceId}</td> 
    <td> 
     <input 
     name="isEnabled" 
     type="checkbox" 
     checked={rule.enabled} 
     /> 
    </td> 
    <td>{rule.name}</td> 
    </tr> 
</tbody> 

Answer 3

あなたは<td>要素に入れなければならない、とあなたは<td> DOMにスタイルを追加することができます。

Answer 4

<td>のペアが1つお見逃しました。 {と}も必要ありません。その

<tbody key={rule._id}> 
    <tr> 
    <td>{rule.deviceId}</td> 
    <td> 
     <input 
     name="isEnabled" 
     type="checkbox" 
     checked={rule.enabled} /> 
    </td> 
    <td>{rule.name}</td> 
    </tr> 
</tbody>