当输入被声明为空时，在React中添加一个复选框

Question

这是我的问题，我正在渲染并返回一个列表，如下所示：

return (
        <li className="itemsInList">{this.props.children}</li>
    )

但是我想添加一个复选框，所以如果这样做：

return (
        <input type="checkbox" className="itemsInList">{this.props.children}</input>
    )

但随后显示错误： arning: input is a void element tag and must not have children

如何解决此错误，以将其显示在带有复选框的列表中？

Answer 1

好吧，错误很明显。 输入内容不允许有孩子。 这是HTML定义的一部分。 看到这个

我猜想您想要this.props.children每个项目一个复选框。 所以我要做的是保留<li>并将<input>放进去。

return (
  <ul className="itemsInList">
    {this.props.children.map(function(child) { 
      return (<li className='child'>
        <input type='checkbox'>
        <label>{child.someAttribute}</label>
      </li>);
    }} 
  </ul>
);

注意，您将必须为循环中的每个<li>指定唯一的key属性。

希望能有所帮助。