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

Question

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

我知道它不应该有 children，所以我也尝试将它移到 </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>

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

Unhandled Rejection (Error) when inserting a checkbox on React App

html

javascript

checkbox

reactjs