当前位置：首页 > article >正文

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

article 2024/10/20 14:52:36

只针对函数组件

1. 第一种写法：

function App({ id }) {
  return id==1? <h1>hello</h1> : <h1>world</h1>;
}

或者：

function App({ id }) {
  return (<h1>{id==1 && "hello" || id==2 && "world" || "unknown"}</h1>)
}

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

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

3. 第三种写法：

function App({ id }) {
  return (<h1>{(()=>{
    if (id==1) {
      return "hello"
    }
    else if (id==2) {
      return "world"
    }
  })()}</h1>);
}

switch同理:

function App({ id }) {
  return (<h1>{(()=>{
    switch(id) {
      case 1:
        return "hello"
      case 2:
        return "world"
      default:
        return "unknown"
    }
  })()}</h1>);
}

查看全文

http://www.kler.cn/news/357424.html