7 react 中的條件渲染

function

usergreeting (props) 
function
guestgretting (props) 
function
greeting (props) 
return
}reactdom.render(
true} />,
document.getelementbyid('root')
)

function

usergreeting (props) 
function
guestgretting (props) 
function
greeting (props) 
return
}class logincontrol extends react.component 
} handleloginin () )
} handleloginout () )
} loginbtn () >退出
} 
return
this.handleloginin.bind(this)}>登入
} render () 
) }
}reactdom.render( ,
document.getelementbyid('root')
)

1. 可以在 jsx 中巢狀任何表示式

2.true && expression總是會返回expression, 而false && expression總是會返回false

function

usergreeting (props) 
function
guestgretting (props) 
class logincontrol extends react.component 
this.handleloginin = this.handleloginin.bind(this
) 
this.handleloginout = this.handleloginout.bind(this
) }
handleloginin() )
} handleloginout () )
} render () >登入;
if(islogin) >退出
} 
return
( 
// 與運算條件渲染
) }
}reactdom.render( ,
document.getelementbyid('root')
)

上述例項改造為三目運算渲染

render () >登入;

if(islogin) >退出
} 
return
( 
// 三目運算
) }

React 深入系列7 React 常用模式

react 深入系列，深入講解了react中的重點概念 特性和模式等，旨在幫助大家加深對react的理解，以及在專案中更加靈活地使用react。1.受控元件 react 元件的資料流是由state和props驅動的，但對於input textarea select等表單元素，因為可以直接接收使用者在...

React條件渲染

在乙個新的元件內根據不同的條件返回不同內容的元件 function greeting props return 將元素存入乙個變數，作為變數表示式再渲染 let button null if isloggedin else 當條件滿足再渲染，true expression總是會返回expressio...

react條件列表渲染

條件渲染 1.條件判斷 constructor props render else return 封裝到函式中 constructor props render gettitlejsx else return titlejsx 2.三元運算子class extends react.component...