JSX中实现条件渲染

基础用法（展示元素较少时）

1、&&：逻辑与运算符。在 JavaScript 里，逻辑与运算符采用短路求值的策略。若第一个操作数为 false，则不会对第二个操作数进行求值，直接返回第一个操作数；若第一个操作数为 true，则返回第二个操作数。

2、三目表达式

示例：

const isLogin = true;

function App() {
  return (
    <div className="App">

      {/* 逻辑与 && */}
      {isLogin && <p>已登录</p>}

      {/* 三目运算 */}
      {isLogin ? <p>用户：jack</p> : <p>请登录</p>}

    </div>
  );
}

export default App;

略复杂情况 

示例：

需求：列表中需要根据文章状态适配三种情况：单图、三图和无图三种模式

解决方案：自定义函数 + if 判断语句

const articalType = 1; // 0无图 1单图 3三图

function getArticalTem() {
  if (articalType === 0) {
    return <div>我是无图模式</div>
  } else if (articalType === 1) {
    return <div>我是单图模式</div>
  } else {
    return <div>我是三图模式</div>
  }
}

function App() {
  return (
    <div className="App">

      {/* 调用函数渲染不同模版 */}
      {getArticalTem()}

    </div>
  );
}

export default App;