<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx条件渲染的使用</title>
</head>
<body>
<div id="root"></div>
<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/babel.js"></script>
<script type="text/babel">
// 1.定义App根组件
class App extends React.Component {
constructor() {
super()
this.state = {
message: "Hello World",
isShow: false,
arrtibute: undefined
}
}
render() {
const { isShow, arrtibute } = this.state
// 1.条件判断方式一: 使用if进行条件判断
let showElement = null
if (isShow) {
showElement = <h2>显示</h2>
} else {
showElement = <h1>不显示</h1>
}
return (
<div>
{/* 1.方式一: 根据条件给变量赋值不同的内容 */}
<h1>方式一: 根据条件给变量赋值不同的内容</h1>
<div>{showElement}</div>
<h1>方式二: 三元运算符 </h1>
{/* 2.方式二: 三元运算符 */}
<div>{isShow ? <button>显示!</button> : <h3>隐藏</h3>}</div>
<h1>方式二: &&逻辑与运算 </h1>
{/* 3.方式三: &&逻辑与运算 */}
{/* 场景: 当某一个值, 有可能为undefined时, 使用&&进行条件判断 */}
<div>{arrtibute && <div>{arrtibute.name + " " + arrtibute.desc}</div>}</div>
</div>
)
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App />)
</script>
</body>
</html>
扫一扫
2930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
