在ReactJS

Question

class Example extends React.Component { 
    constructor() { 
     super(); 
     this.isChecked = this.isChecked.bind(this); 
    } 

    isChecked(ex){ 
     return this.props.defaults && $.inArray(ex, this.props.defaults); 
    } 

    render() { 
     return (
      <div className="example"> 
      {this.props.items.map(item => (
        var checked = this.isChecked({item.type}); 

        <span key={item.type}> 
         <input type="checkbox" {checked ? 'checked' : ''} name="example" value={item.type} id={item.type} /> 
         <label htmlFor={item.type}>{item.display}</label> 
        </span> 
      ))} 
      </div> 
     ); 
     } 
} 

基於可變在上述例子中有條件地設置複選框的狀態，我已通過的項目的列表的部件this.props.items和默認值this.props.defaults的列表。對於每個項目，如果項目在默認列表中，我希望其狀態爲checked。留下整體設計相同，我該怎麼做？ （注：我意識到我可以重新設計應用程序以避免在地圖中聲明變量的問題，這不是問題）。

上面的代碼不工作（顯然），我只是想給大家一個想法，我在這裏嘗試。如果你運行這個錯誤，那麼在聲明「var」的地方就會出現類似「意外標記」的錯誤。

Answer 1

的render方法有一些語法錯誤，這應該工作：

render() { 
    return (
     <div className="example"> 
     {this.props.items.map((item) => { 
       var checked = this.isChecked(item.type); 
            return (
        <span key={item.type}> 
         <input type="checkbox" checked={checked ? 'checked' : ''} name="example" value={item.type} id={item.type} /> 
         <label htmlFor={item.type}>{item.display}</label> 
        </span> 
       ) 
     })} 
     </div> 
    ); 
    } 

這主要失誤被宣佈在地圖的功能，你必須在括號來包裝項目，用方括號括而不是括號的功能。如果胖箭頭功能只有一條語句，則不需要指定return。但是在這種情況下，您添加了var checked行，因此您現在必須明確地將另一行設爲return聲明。在輸入中如何設置checked也存在問題。希望有所幫助！