<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。可能是你可以将你的input换成td。

<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>对。 {和}也不是必需的。应该是这样的

<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>