一：條件渲染
在某些情況下，我們希望界面根據不同情況展示不同的內容，因為之前一直使用vue進行開發，這里會以vue進行對比
在VUE中我們可以通過一些指令 v-if v-show來控制頁面顯示內容
在React中我們完全遵循JavaScript語法來進行條件渲染這也是react靈活的之一
學好了react 原生JS也會不錯 那么react常見的渲染方式有哪些呢？
1.1條件判斷陳述句
當邏輯方式非常多時，可以使用條件判斷陳述句
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isBoy: true
}
}
render() {
let titleJsx = null;
if (this.state.isBoy) {
titleJsx = <h2>是的~</h2>
} else {
titleJsx = <h2>不是~</h2>
}
return (
<div>
{titleJsx}
</div>
)
}
}
當然如果覺得上面并不是太方便 我們也可以把它封裝到一個函式中去
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isBoy: true
}
}
render() {
return (
<div>
{this.getTitleJsx()}
</div>
)
}
getTitleJsx() {
let titleJsx = null;
if (this.state.isisBoyogin) {
titleJsx = <h2>是~</h2>
} else {
titleJsx = <h2>不是~</h2>
}
return titleJsx;
}
}
上面代碼我都是通過ES6新語法類來書寫 讓虛擬DOM繼承自React this.state可以定義一些變數
1.2三元運算式
另一種實作條件渲染的方法就是三元運算式:isboy?true:false
三元運算式適用于沒有太多邏輯代碼，只是根據不同條件直接回傳不同的結果
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isBoy: true
}
}
render() {
return (
<div>
<h2>{this.state.isBoy? "是~": "不是"}</h2>
<button onClick={e => this.boyBtnClick()}>{this.state.isBoy ? "退出": "登錄"}</button>
</div>
)
}
boyBtnClick() {
this.setState({
isBoy : !this.state.isBoy
})
}
}
上圖代碼通過三元運算子實作一個條件不算復雜的案例 講一下在react中定義點擊事件 在vue中我們為了方便快捷直接@就可以系結 在react中需要onClick C需要大寫 然后以物件形式把點擊事件添加，需要加this關鍵字
1.3 用react實作v-show效果
一個原生的html原生，渲染和不渲染，如果頻繁的進行切換，相對來講是比較耗費性能
在vue中提供了一個v-show指令來實作渲染和不渲染，大家相比都知道v-show是通過display來控制
react中沒有指令，但react是相對靈活的，代價就是需要自己靈活的實作…
render() {
const { isLogin, username } = this.state;
const nameDisplay = isLogin ? "block": "none";
return (
<div>
<h2 style={{display: nameDisplay}}>{username}</h2>
<button onClick={e => this.loginBtnClick()}>{isLogin ? "退出": "登錄"}</button>
</div>
)
}
看如上代碼，其實就是寫了一個行內標簽，來控制username 目前沒有講到react中如何書寫樣式，就先寫一個行內
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/203125.html
標籤：AI
上一篇：cgb2007-京淘day04
下一篇：JS中物件資料存盤