我在jsx中有这样的数组,像breadcrumb = ['food','hotdogt']
但我得到了一个错误unexpected token .
?es6 map失败阵列,意外的令牌
{breadcrumb.map(obj => {
{obj}
})}
我在jsx中有这样的数组,像breadcrumb = ['food','hotdogt']
但我得到了一个错误unexpected token .
?es6 map失败阵列,意外的令牌
{breadcrumb.map(obj => {
{obj}
})}
写这样的:
{
breadcrumb.map(obj => {
return <div> {obj} </div>
})
}
或
{
breadcrumb.map(obj => <div> {obj} </div>)
}
或
{
breadcrumb.map(obj => obj)
}
{}
括号,当您使用内012 js
代码所需元素,您使用的是{obj}
,但未使用任何html
元素。你忘了也使用return
。
检查这个例子:
var breadcrumb = ['food','hotdogt'];
var App =() => {
return(
<div>
{
breadcrumb.map(obj => <p key={obj}> {obj} </p>)
}
{
breadcrumb.map((obj, i) => {
return <span key={obj}>
<span className="bold"> {obj} </span>
{i != breadcrumb.length -1 ? <span className="seperator"> -> </span> : null}
</span>
})
}
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
谢谢,但我在jsx中的HTML卡住http://stackoverflow.com/questions/43153114/simple-breadcrum-logo-in-jsx-of-react-binding –
你想要的结果是这样的:a-> b - > c-> d-> e ??如果a,b,c,d,e将是数组的项目。 –
正确,但我搞砸了jsx内的html标签,我搞砸了串接。 ' - >'应该被包裹在标签中,以便我可以设计它们。 –
尽量节省'map'函数变量的结果,并把变量放到渲染,而不是以前的做法。 –
@JDHrnnts我在jsbin中做过。 –
你能发布一个指向该资源的链接吗? –