JSX 条件渲染

条件渲染"/>

JSX 条件渲染

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

function App() {// 条件渲染// 技术方案：1.三元表达式（常用） 2.逻辑&&（与）运算const flag = truereturn (<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;

运行结果：