JSX条件渲染——形式4种:js形式条件渲染 & 元素变量 & 行内条件渲染 & 阻止渲染
- js形式条件渲染
function showForm (flag) {
// 根据参数flag的状态显示不同内容
if(flag) {
// 显示登陆框
return <div>登陆框</div>
} else {
// 显示注册框
return <div>注册框</div>
}
}
- 元素变量
function showForm (flag) {
// 根据参数flag的状态显示不同内容
let form = null;
if(flag) {
form = <div>登陆</div>
} else {
form = <div>注册</div>
}
return form
}
- 行内条件渲染
function showForm (flag) {
// return <div>{flag? '登陆': '注册'}</div>
// return <div>{flag ? <div>登陆</div>: <div>注册</div>}</div>
return <div>{flag && <div>条件成立就显示</div>}</div>
}
- 阻止渲染
function showForm (flag) {
if (flag) {
return null;
}
return <div>阻止渲染</div>
}
文件结构
公共html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./style/style.css">
<!-- 第一步:引入相关js库文件 -->
<script type="text/javascript" src="./lib/react.development.js"></script>
<script type="text/javascript" src="./lib/react-dom.development.js"></script>
<!-- babel文件的作用:编译React代码,使之变成原生js代码才可以在浏览器中运行 -->
<script type="text/javascript" src="./lib/babel.min.js"></script>
</head>
<body>
<!-- 第二步:页面中需要提供一个容器 -->
<div id="root"></div>
<!-- 第三步:可以基于React实现前端功能 -->
<script type="text/babel" src="./js/05-JSX条件渲染.js"></script>
</body>
</html>
在VScode中,在VScode中打开,需安装插件Live Server
,右键打开Open With Live Server
,打开页面
实例01-js形式条件渲染
js文件
/*
JSX条件渲染
*/
// js形式条件渲染
function showLoginOrRegisterForm (flag) {
// 条件渲染
if (flag) {
// 登录表单
return (
<div>登录表单</div>
)
} else {
// 注册表单
return (
<div>注册表单</div>
)
}
}
//此处为空或false时,显示为——注册表单;true时——登录表单
let element = <div>{showLoginOrRegisterForm(false)}</div>
ReactDOM.render(element, document.getElementById('root'))
显示
实例02- 元素变量
js文件
/*
JSX条件渲染
*/
// js形式条件渲染
// function showLoginOrRegisterForm (flag) {
// // 条件渲染
// if (flag) {
// // 登录表单
// return (
// <div>登录表单</div>
// )
// } else {
// // 注册表单
// return (
// <div>注册表单</div>
// )
// }
// }
// 元素变量
function showLoginOrRegisterForm (flag) {
// 条件渲染
let form = null
if (flag) {
form = <div>登录表单</div>
} else {
form = <div>注册表单</div>
}
return form
}
//此处为空或false时,显示为——注册表单;true时——登录表单
let element = <div>{showLoginOrRegisterForm(true)}</div>
ReactDOM.render(element, document.getElementById('root'))
显示结果同上
实例03-行内条件渲染
js文件
/*
JSX条件渲染
*/
// js形式条件渲染
// function showLoginOrRegisterForm (flag) {
// // 条件渲染
// if (flag) {
// // 登录表单
// return (
// <div>登录表单</div>
// )
// } else {
// // 注册表单
// return (
// <div>注册表单</div>
// )
// }
// }
// 元素变量
// function showLoginOrRegisterForm (flag) {
// // 条件渲染
// let form = null
// if (flag) {
// form = <div>登录表单</div>
// } else {
// form = <div>注册表单</div>
// }
// return form
// }
// 行内条件渲染
function showLoginOrRegisterForm () {
// true-显示女;false-显示男
let gender = true
return <div>{gender? <div>男<input type="radio"/></div> : <div>女<input type="radio"/></div>}</div>
}
//默认为空
let element = <div>{showLoginOrRegisterForm()}</div>
ReactDOM.render(element, document.getElementById('root'))
显示
实例04-阻止渲染
js文件
/*
JSX条件渲染
*/
// js形式条件渲染
// function showLoginOrRegisterForm (flag) {
// // 条件渲染
// if (flag) {
// // 登录表单
// return (
// <div>登录表单</div>
// )
// } else {
// // 注册表单
// return (
// <div>注册表单</div>
// )
// }
// }
// 元素变量
// function showLoginOrRegisterForm (flag) {
// // 条件渲染
// let form = null
// if (flag) {
// form = <div>登录表单</div>
// } else {
// form = <div>注册表单</div>
// }
// return form
// }
// 行内条件渲染
// function showLoginOrRegisterForm () {
// let gender = false
// return <div>{gender? <div>男<input type="radio"/></div> : <div>女<input type="radio"/></div>}</div>
// }
// 阻止渲染
function showInfo (flag) {
//flag为false-显示文字;为true-显示空/白屏
if (flag) {
return null
}
return <div>阻止渲染</div>
}
// let element = <div>{showLoginOrRegisterForm()}</div>
let element = <div>{showInfo(false)}</div>
ReactDOM.render(element, document.getElementById('root'))
显示