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。

如果list是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'));

这会奏效。 Here is the fiddle

响应地图输入复选框得到意外的令牌

2 个答案: