es6マップが配列上で失敗しました。予期しないトークン

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'/>