React條件渲染實例講解使用
我們先創(chuàng)建一個用于演示條件渲染的組件
import './App.css';
import React from "react";
class App extends React.Component{
constructor(props){
super(props);
this.state = {
signIn: false
}
}
increase(){
this.setState({
signIn: !this.state.signIn
})
}
render(){
let ligin = this.state.signIn?<span>已登錄</span>:<span>未登錄</span>
return (
<div className="App">
{ ligin }
<button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登錄":"登錄" }</button>
</div>
)
}
}
export default App;這里我們模擬了一個登錄和未登錄的情況
首先 我們在state中定義了一個signIn 這是個布爾類型的變量 比喻成 他為true 表示用戶已登錄 為false 表示用戶還沒有登錄
然后 我們在render函數(shù)中定義了一個ligin變量 他用了三元運算符 這里是在判斷 this.state.signIn是不是true
如果為true 則為已登錄 否則 是未登錄
然后 這個ligin就接受到了結果 然后我們將他插入在我們的頁面元素中
運行的效果就是這樣
然后我們點一下按鈕
因為按鈕的點擊事件會改變signIn 他的條件改變了 渲染的元素就 不一樣了
然后我們的條件判斷也可以直接寫在頁面里
我們在state中再加一個list值
constructor(props){
super(props);
this.state = {
signIn: false,
list: []
}
}
我們加了一個list變量 他的值是一個空數(shù)組
然后我們在render中循環(huán)遍歷這個list
render(){
let ligin = this.state.signIn?<span>已登錄</span>:<span>未登錄</span>
return (
<div className="App">
{ ligin }
<div>
{
this.state.list.map((item,index) =>{
return <p key = {index}>{ item }</p>
})
}
</div>
<button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登錄":"登錄" }</button>
</div>
)
}
但大家或許會發(fā)現(xiàn) 我們的數(shù)組是沒有值的啊
用戶一看 你這什么都沒有 是不是出問題啦？
這是我們就可以判斷 如果數(shù)組是空的 給用戶一個提示
render(){
let ligin = this.state.signIn?<span>已登錄</span>:<span>未登錄</span>
return (
<div className="App">
{ ligin }
{
this.state.list.length > 0?
<div>
{
this.state.list.map((item,index) =>{
return <p key = {index}>{ item }</p>
})
}
</div>
:
<div>暫無數(shù)據(jù)....</div>
}
<button onClick = { this.increase.bind(this) }>{ this.state.signIn?"取消登錄":"登錄" }</button>
</div>
)
}
我們這里判斷this.state.list的長度大于0 我們就循環(huán)渲染 如果是0 那就展示提示 暫無數(shù)據(jù)…
我們代碼運行結果如下
到此這篇關于React條件渲染的文章就介紹到這了,更多相關React條件渲染內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
react-router-dom v6版本實現(xiàn)Tabs路由緩存切換功能
今天有人問我怎么實現(xiàn)React-Router-dom類似標簽頁緩存,很久以前用的是react-router v5那個比較容易實現(xiàn),v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10
由于redux使用這方面有很多的不解,不是很熟練,所以我查找資料,進行一個總結,希望可以鞏固知識,并且能幫助到需要的人,所以我會寫的比較清晰簡單明了點,若有不對之處,請大家糾正2023-10-10
這篇文章主要介紹了React?Native?中限制導入某些組件和模塊的方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要來和大家一起分享在?React?開發(fā)中常見的一些錯誤,以及如何避免這些錯誤,理解這些問題背后的細節(jié),防止犯下類似的錯誤,需要的可以參考下2023-12-12
React videojs 實現(xiàn)自定義組件(視頻畫質/清晰度切換) 的操作代碼
最近使用videojs作為視頻處理第三方庫,用來對接m3u8視頻類型,這里總結一下自定義組件遇到的問題及實現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-08-08
在react中對less實現(xiàn)scoped配置方式
這篇文章主要介紹了在react中對less實現(xiàn)scoped配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
最近需要使用 Hybrid 的方式開發(fā)一 個 APP,交互和原生 APP 相似并且需要 IM 通信,本文給大家介紹了使用React實現(xiàn)原生APP切換效果,文中通過代碼示例講解的非常詳細,感興趣的小伙伴跟著小編一起來看看吧2025-01-01
本篇文章主要介紹了淺談使用React.setState需要注意的三點，提出了三點對 React 新手來說是很容易忽略的地方，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
詳解react中useCallback內部是如何實現(xiàn)的
前幾天有人在問在useCallback函數(shù)如果第二個參數(shù)為空數(shù)組, 為什么拿不到最新的state值，那么這一章就來分析一下useCallback內部是如何實現(xiàn)的，感興趣的小伙伴跟著小編一起來學習吧2023-07-07
本篇文章主要介紹了ReactJs設置css樣式的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06