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

y5236482024-10-23 22:16

只针对函数组件

第一种写法：

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

如果需要条件细分，第二种写法

javascript 复制代码

function App({ id }) {
  let content = ""
  if (id==1) {
    content = "hello" //如果包含html标签，默认会被转义
  }
  else if (id==2) {
    content = "world"
  }
  return (<h1>{content}</h1>);
}

第三种写法：

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