在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也存在问题。希望有所帮助！