JSX 条件渲染

学习目标: 能够在 JSX 中实现条件渲染
作用: 根据是否满足条件生成 HTML 结构,比如 Loading 效果
实现: 可以使用三元运算符或者逻辑&&(与)运算符
实例:

function App() {
  // 条件渲染
  // 技术方案:1.三元表达式(常用) 2.逻辑&&(与)运算

  const flag = true
  return (
    <div className="App">
      1.三元表达式<br/>
      (1).简单版:
        {flag ? <span>this is span</span>:null}<br/>
      (2).复杂版(可用小括号包裹起来):
      {
        flag ? (<div>
          <span>this is span2</span>
        </div>) : null
        }
      2.&& (前面为true则显示,false则不显示))<br/>
        {true && <span>this is span</span>}
    </div>
  );
}

export default App;

运行结果:
JSX 条件渲染_第1张图片

你可能感兴趣的:(前端,javascript,开发语言)