0
点赞
收藏
分享

微信扫一扫

掌握Go类型内嵌:设计模式与架构的新视角

五殳师兄 2023-10-23 阅读 42

学习目标: 能够在 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;

运行结果:
在这里插入图片描述

举报

相关推荐

0 条评论