[英]react unexpected token in using map of es6
我找不到问题所在,看不到jsbin中的哪一行有问题。 http://jsbin.com/bewigabomi/edit?js,控制台,输出
class HelloWorldComponent extends React.Component {
constructor(){
super()
this.handleChange = this.handleChange.bind(this)
}
handleChange(e){
console.log(e.target.value)
}
render() {
const data = {
"fruits":[
{"name":"banana","value":true},
{"name":"watermelon","value":false},
{"name":"lemon","value":true},
]
}
return (
{data.fruits.map(obj =>
<div>
<label>{obj.name}</label>
<input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/>
</div>
)}
);
}
}
React.render(
<HelloWorldComponent/>,
document.getElementById('react_example')
);
尝试了15分钟以上,无法发现问题,需要帮助!
将常量_drawlayout
类之外,然后创建_drawlayout
方法,它可以工作。
const data = {
"fruits":[
{"name":"banana","value":true},
{"name":"watermelon","value":false},
{"name":"lemon","value":true},
]
}
class HelloWorldComponent extends React.Component {
constructor(){
super()
this.handleChange = this.handleChange.bind(this)
}
handleChange(e){
console.log(e.target.value)
}
_drawLayout() {
return data.fruits.map(obj => {
return(
<div>
<label>{obj.name}</label>
<input onChange={e => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/>
</div>
)
})
}
render() {
return (
<div>
{this._drawLayout()}
</div>
);
}
}
React.render(
<HelloWorldComponent name="Joe Schmoe"/>,
document.getElementById('react_example')
);
编辑: map()方法需要返回。
您需要像这样包装地图功能
return (
<div>{data.fruits.map(obj => (
<div>
<label>{obj.name}</label>
<input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true} />
</div>
)
)}</div>
);
您可以返回单个组件,但map返回数组;
我认为您缺少左括号,并且map必须具有return子句:
return (
{data.fruits.map(obj =>
//Your are missing this parenthesis and the return instruction
return (
<div>
<label>{obj.name}</label>
<input onChange={(e) => this.handleChange(e)} type="checkbox" defaultChecked={obj.true}/>
</div>
)}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.