在 React App 上插入复选框时未处理的拒绝（错误）

Question

我正在尝试显示文本，然后在其后立即显示一个复选标记。但是，我收到错误“未处理的拒绝（错误）：输入是一个空元素标签，既不能有children，也不能使用dangerouslySetInnerHTML。”

我知道它不应该有孩子，所以我也尝试将它移到 </li> 结束标记之前。我也尝试过这样做的想法：<input / >，因为我尝试在网上搜索答案。

更新： 将其更改为 <input / > 后，我现在收到错误：解析错误：预期对应的 JSX 结束标记为 .这是否意味着我必须添加一个结束标签并遇到与以前相同的问题？

我被难住了！任何帮助，将不胜感激。谢谢！

return (
 <div>
    <div>
        <table className = "className">
          <tbody>
          <tr>
            <th>Only avaliable Now</th>
          </tr>
              {this.state.time_array.map(item => (
                <tr>
                  <td>
                    <li><b> {item.id}</b> 
                        <input type="checkbox" 
                          id={item.Name}>
                          checked={item.gotIt}
                        </input>
                        <ul>
                           <li>Where to find: {item.find}</li>                      
                        </ul>
                    </li>
                </td>
              </tr>
              ))}
            </tbody>
        </table>
    </div>
  </div>      
);

Answer 1

<input type="checkbox" 
   id={item.Name}>
   checked={item.gotIt}
</input>

代码上面的输入标签有一些错误的使用； 做如下改变；

<input type="checkbox" 
   id={item.Name}>
   checked={item.gotIt}
/>

或

<input type="checkbox" 
   id={item.Name}>
   checked={item.gotIt}
>
</input>