React JSX 使用条件语句渲染UI的两种写法

只针对函数组件

  1. 第一种写法:
javascript 复制代码
function App({ id }) {
  return id==1? <h1>hello</h1> : <h1>world</h1>;
}

或者:

javascript 复制代码
function App({ id }) {
  return (<h1>{id==1 && "hello" || id==2 && "world" || "unknown"}</h1>)
}
  1. 如果需要条件细分,第二种写法
javascript 复制代码
function App({ id }) {
  let content = ""
  if (id==1) {
    content = "hello" //如果包含html标签,默认会被转义
  }
  else if (id==2) {
    content = "world"
  }
  return (<h1>{content}</h1>);
}
  1. 第三种写法:
javascript 复制代码
function App({ id }) {
  return (<h1>{(()=>{
    if (id==1) {
      return "hello"
    }
    else if (id==2) {
      return "world"
    }
  })()}</h1>);
}

switch同理:

javascript 复制代码
function App({ id }) {
  return (<h1>{(()=>{
    switch(id) {
      case 1:
        return "hello"
      case 2:
        return "world"
      default:
        return "unknown"
    }
  })()}</h1>);
}
相关推荐
OEC小胖胖2 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->3 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim3 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端4 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头5 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz5 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子5 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边5 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客5 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8885 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js