このif/else文にif/else文を追加するにはどうすればよいですか？

Question

私はこのコードを変更することができる方法を考え出すいくつかの助けが必要です：

export const CommentsListBeijing = ({ comments }) => (
 
    if (comments.length > 0) { 
 
    <ButtonToolbar className="comment-list"> 
 
    {comments.map((com) => (
 
     <CommentsModal key={ com._id } comment={ com } city={com.city} person={com.person} location={com.location} title={com.title} content={com.content} fileLink={com.fileLink} timestamp={com.timestamp} createdBy={com.createdBy}/> 
 
    ))} 
 
    </ButtonToolbar> : 
 
    <Alert bsStyle="warning">No sparks yet. Please add some!</Alert> 
 
);

私は、マッピング関数内であれば/ Elseステートメントを追加したいと思います。

ので

if (com.adminSpark == true) { do something } 
else 
do current 

私がもし/ else文を書くこのように新しいですし、両者を結合する方法がわかりません。

これまでのおかげでよろしく！私は受け取ったフィードバックに基づいてelse/ifステートメントを追加しようとしていますが、ステートメントが始まる場所でエラーが発生し続けます： "imports/ui/components/beijing/comments-list-beijing.js：16：2：Unexpectedトークン（16：2）」。

私は間違っていますか？

Answer 1

あなたはワンライナーを気に入るだろうならば、私は行きますよテナリー。

export const CommentsListBeijing = ({ comments }) => (
    if (comments.length > 0) { 
    <ButtonToolbar className="comment-list"> 
    {comments.map((com) => (
     return com.adminSpark ? /* return something admin-related */ :  <CommentsModal key={ com._id } comment={ com } city={com.city} person={com.person} location={com.location} title={com.title} content={com.content} fileLink={com.fileLink} timestamp={com.timestamp} createdBy={com.createdBy}/> 
    ))} 
    </ButtonToolbar> : 
    <Alert bsStyle="warning">No sparks yet. Please add some!</Alert> 
} 
); 

このコードの可読性を向上させるためものの、私はむしろそれのようなものに見えるだろう：

export const CommentsListBeijing = ({ comments }) => (
    if (comments.length > 0) { 
    <ButtonToolbar className="comment-list"> 
    {comments.map((com) => (
     return com.adminSpark ? 
     /* something admin-related */ : 
     <CommentsModal 
      key={ com._id } 
      comment={ com } 
      city={com.city} 
      person={com.person} 
      location={com.location} 
      title={com.title} 
      content={com.content} 
      fileLink={com.fileLink} 
      timestamp={com.timestamp} 
      createdBy={com.createdBy} /> 
    ))} 
    </ButtonToolbar> : 
    <Alert bsStyle="warning">No sparks yet. Please add some!</Alert> 
    } 
); 

ほとんど常に読みやすいちょうど「簡潔」である1よりも貴重取得するコードを。しかし、私の2セント：

Answer 2

これはそれを私が考える

export const CommentsListBeijing = ({ comments }) => (
    if (comments.length > 0) { 
    <ButtonToolbar className="comment-list"> 
    {comments.map((com) => (
     if (com.adminSpark) { 
     // do and return something; 
     } else { 
     return <CommentsModal key={ com._id } comment={ com } city={com.city} person={com.person} location={com.location} title={com.title} content={com.content} fileLink={com.fileLink} timestamp={com.timestamp} createdBy={com.createdBy}/> 
     } 
    ))} 
    </ButtonToolbar> : 
    <Alert bsStyle="warning">No sparks yet. Please add some!</Alert> 
); 

Answer 3

を行う必要があり、これは役立ちます：

if (comments.length > 0) { 
 
    <ButtonToolbar className="comment-list"> 
 
    {comments.map((com) => (
 
     if (com.adminSpark==true) or if (com.adminSpark){ 
 
     // your code ; 
 
     } else { 
 
     return <CommentsModal key={ com._id } comment={ com } city={com.city} person={com.person} location={com.location} title={com.title} content={com.content} fileLink={com.fileLink} timestamp={com.timestamp} createdBy={com.createdBy}/> 
 
     } 
 
    ))} 
 
    </ButtonToolbar>