最新React基础-JSX语法条件渲染详解_jsx 条件渲染(2)，2024年最新最新阿里+头条+腾讯大厂大数据开发笔试真题

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

  showElement = <h2>呵呵呵</h2>
}

return (
  <div>
    {/\* 方式一: 条件判断语句 \*/}
    {showElement}
  </div>
)

}
}

const app = ReactDOM.createRoot(document.querySelector(“#app”))
app.render()

> 
> 方式二: 三元运算符判断, 适合逻辑比较简单
> 
> 
> 

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()

> 
> 方式三: (*类似于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

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

.csdn.net/topics/618545628)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！