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>);
}
相关推荐
Hilaku6 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明8 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD22 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip27 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
ZL不懂前端29 分钟前
使用 React + Konva 构建交互式立方体绘制工具
react.js·ecmascript 6
斐济岛上有一只斐济32 分钟前
后端程序员的CSS复习
前端
Enddme35 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员36 分钟前
微信小程序使用 Tailwind CSS version 3
前端
你怎么知道我是队长1 小时前
python---eval函数
开发语言·javascript·python
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt