JSX 条件渲染

最新推荐文章于 2024-07-23 12:36:06 发布

雨落云尚

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量89

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_53761834/article/details/133987499

版权

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