条件付き上記の例で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> 
     ); 
     } 
} 

における変数に基づいて、チェックボックスの状態を設定し、I成分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> 
    ); 
    } 

主な間違いがマップに関数を宣言して、あなたは括弧内のアイテムをラップし、括弧の代わりに括弧で機能を囲むようにしていること。太い矢印関数に1つの文しかない場合は、returnを指定する必要はありません。しかし、この場合はvar checked行を追加したので、他の行を明示的にreturn文にする必要があります。入力にcheckedを設定する方法にも問題がありました。希望が助けてくれる！