通過輸入複選框反應地圖得到意想不到的令牌

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')); 

這將工作。 Here is the fiddle。