在reactjs中使用es6映射的意外标记

Question

我在jsx中有这个像breadcrumb = ['food','hotdogt']这样的数组但是我收到了unexpected token .的错误unexpected token . ？

{breadcrumb.map(obj => {
   {obj}
})}

Answer 1

写这样：

{
    breadcrumb.map(obj => {
         return <div> {obj} </div>
    })
}

要么

{
   breadcrumb.map(obj => <div> {obj} </div>)
}

要么

{
   breadcrumb.map(obj => obj)
}

{}当您使用大括号需要js里面的代码html元素，您使用{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'/>