es6 map失敗陣列，意外的令牌

Question

我在jsx中有這樣的數組，像breadcrumb = ['food','hotdogt']但我得到了一個錯誤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) 
} 

{}括號，當您使用內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'/>