如何在此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> 
 
);

我想映射函數中添加一個if/else語句。

所以

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

我的新書寫這樣一個if/else語句，不知道如何將兩者結合起來。

感謝您的幫助！我一直試圖根據收到的反饋來添加else/if語句，但是在聲明開始的地方我總是收到一個錯誤：「imports/ui/components/beijing/comments-list-beijing.js：16：2：Unexpected令牌（16：2）「。

我在做什麼錯？

Answer 1

如果你會喜歡一個班輪，我會去tenary。

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> 
    } 
); 

代碼。我的兩分錢雖然:)

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>