import React from 'react'; import ReactDOM from 'react-dom';function UserGree(props) {return ( < h1 > 歡迎登陸 < /h1>)}function UserLogin(props) {return ( < h1 > 請先登陸 < /h1>)}class ParentCom extends React.Component {constructor(props) {super(props)this.state = {isLogin: true}}render() {let element = nullif (this.state.isLogin) {if (this.state.isLogin) {element = ( < UserGree > < /UserGree>)}else {element = ( < UserLogin > < /UserLogin>)}return ( <div ><h1 > 我是頭部 < /h1> { element } <h1 > 三元運算符的 < /h1> { this.state.isLogin ? <UserGree > < /UserGree>: < UserLogin > < /UserLogin >} <h1 > 我是尾部 < /h1> < /div >)}}}//console.log("這是渲染函數")ReactDOM.render( < ParentCom / > , document.querySelector("#root"))

運行結果

總結

以上是生活随笔為你收集整理的前端学习（2230）：react条件渲染实现登录二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。