亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何避免 JSX 中的嵌套三元 ESLint 錯誤

如何避免 JSX 中的嵌套三元 ESLint 錯誤

小怪獸愛吃肉 2022-10-27 15:35:24
我必須做類似的事情:email ? do_this : icon ? do_that : do_something_else這可以使用嵌套三元非常簡單地完成,但是這個 ESLint 規則并不能做到這一點。在他們的文檔中,他們建議使用 if-else 但我不知道如何在我的情況下實現它該代碼適用于一個三元組。return (  <td>    {email ? (       <span>...</span>     ) : (       <span>...</span>     )}  </td>添加嵌套三元將返回該 ESLint 錯誤并使用 if-else 表示這if是一個意外標記:return (  <td>    {if(email) return ( <span>...</span>);     else if(icon) return ( <span>...</span>);     else return ( <span>...</span>);     }  </td>有可能解決這個問題嗎?
查看完整描述

3 回答

?
慕桂英546537

TA貢獻1848條經驗 獲得超10個贊

您可以將單元格內容存儲在變量中:


let content;

if(email) {

  content = <span>...</span>;

} else if(icon) {

  content = <span>...</span>;

} else {

  content = <span>...</span>;

}


return <td>{content}</td>;


查看完整回答
反對 回復 2022-10-27
?
函數式編程

TA貢獻1807條經驗 獲得超9個贊

另一種選擇是使用枚舉之類的東西來呈現:


if (email) {

 content = 'email';

else if (icon) {

 content = 'icon';

} else {

 content = 'other';

}


return (

 <td>

   {{

   email: <span>...</span>,

   icon:  <span>...</span>,

   other: <span>...</span>,

   }[content]}

 </td>);

這在這里更詳細地解釋:https ://reactpatterns.js.org/docs/conditional-rendering-with-enum/


查看完整回答
反對 回復 2022-10-27
?
眼眸繁星

TA貢獻1873條經驗 獲得超9個贊

我發現提取復雜功能以提高可讀性很有用:


import React from 'react';


// extracted functionality

const emailAction = (email, icon) => {

  if (email) {

    return <span>Do This</span>;

  } else {

    if (icon) {

      return <span>Do That</span>;

    } else {

      return <span>Do Something Else</span>;

    }

  }

};


// your Component

export const TableData = (props) => {

  return <td>{emailAction(props.email, props.icon)}</td>;

};


查看完整回答
反對 回復 2022-10-27
  • 3 回答
  • 0 關注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號