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
,并向其传递了defaults列表this.props.defaults
。对于每个项目,如果该项目在默认列表中,我希望它的状态为checked
。保持整体设计不变,我该怎么做?(注意:我意识到我可以重新设计应用程序以避免在映射内部声明变量的问题。这不是问题)。
上面的代码不起作用(很明显),我只是想让所有人了解我在这里尝试的内容。如果运行此命令,则会在声明“ var”的位置出现类似“意外令牌”的错误。
该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
在输入中的设置方式也存在问题。希望对您有所帮助!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句