输入复选框上的React Map具有出乎意料的令牌

Question

render() {
  return (<div> this.list.map(obj => <input value={obj.name} type="checkbox" />)</div>)
}

为什么上述代码不起作用？有意外的令牌。

Answer 1

您忘了在{}中包装map部分，以这样的写入：

render() {
   return (
      <div> 
         {this.list.map(obj => <input key={obj.name} value={obj.name} type="checkbox" />)}
      </div>
   )
}

将唯一的key分配给每个输入元素。

如果列表是state变量，则需要编写this.state.list，不确定是否使用相同的代码。

Answer 2

您需要将map包装到卷曲括号中。代码应如下：

class HelloWidget extends React.Component {
    constructor(props) {
      super(props);
      this.list = [{
        "id": "exhibitions",
        "name": "Exhibitions"
      }, {
        "id": "festivals_n_concerts",
        "name": "Festivals & Concerts"
      }, {
        "id": "grand_opening",
        "name": "Grand Opening"
      }]
    }
    render() {
      return ( 
        <div> 
            {this.list.map(obj => <input key={obj.name} value={obj.name} type="checkbox" />)} 
        </div>
      )
    }

  }
React.render( <HelloWidget /> , document.getElementById('container'));

这将起作用。这是小提琴。