React条件渲染
某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容:
在vue中，我们会通过指令来控制:比如v-if、v-show;
在React中，所有的条件判断都和普通的JavaScript代码一致;
常见的条件渲染的方式有哪些呢?
方式一: 条件判断语句判断, 适合逻辑较多的情况
class App extends React.Component {
constructor() {
super()
this.state = {
isShow: true
}
}
render() {
const {
isShow } = this.state
let showElement = null
// 条件判断语句决定显式的内容
if (isShow) {
showElement = <h2>哈哈哈</h2>
} else {
showElement = <h2>呵呵呵</h2>
}
return (
<div>
{
/* 方式一: 条件判断语句 */}
{
showElement}
</div>
)
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
方式二: 三元运算符判断, 适合逻辑比较简单
class App extends React.Component {
constructor() {
super()
this.state = {
isShow: true
}
}
render() {
const {
isShow } = this.state
}
return (
<div>
{
/* 方式二: 三元运算符判断 */}
<div>{
isShow ? <h2>我是标题</h2> : <p>我是内容</p> }</div>
</div>
)
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
方式三: (类似于Vue中v-if的效果)逻辑与运算符&&, 适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染;
例如下面代码表示student有值的时候才会渲染, 没有值什么也不渲染
class App extends React.Component {
constructor() {
super()
this.state = {
student: {
firstName: "chen",
lastName: "yq"
}
}
}
render() {
const {
student } = this.state
return (
<div>
{
/* 方式三: 逻辑与运算符 */}
<div>{
student && <h2>{
student.firstName + " " + student.lastName}</h2>}</div>
</div>
)
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)
v-show的效果
主要是控制display属性是否为none, 在React中也可以实现v-show的效果
class App extends React.Component {
constructor() {
super()
this.state = {
isShow: true
}
}
render() {
const {
isShow } = this.state
return (
<div>
{
/* v-show的效果, 切换display */}
<h2 style={
{
display: isShow ? "block" : "none"}}>哈哈哈</h2>
</div>
)
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"))
app.render(<App/>)