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