标签:元素 extends banner page 变量 改变 null utc nbsp
React中的条件渲染和js中的一样,使用js或者其他条件运算符进行不同组件的渲染
可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变。
//元素变量 function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> ) } function LogoutButton(props) { return ( <button onClick={props.onClick}> Logout </button> ) } class LoginControl extends React.Component{ constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn:false} } handleLoginClick(){ this.setState({ isLoggedIn:true }) } handleLogoutClick(){ this.setState({ isLoggedIn:false }) } render(){ const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick}></LogoutButton> } else { button = <LoginButton onClick = {this.handleLoginClick}></LoginButton> } return ( <div> <Greeting isLoggedIn = {isLoggedIn} /> {button} </div> ) } }
ReactDOM.render(<LoginControl />, document.getElementById(‘root‘));
通过大括号{}来包裹代码,来判断是否渲染&&后面的代码
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); } const messages = [‘React‘, ‘Re: React‘, ‘Re:Re: React‘]; // const messages = []; ReactDOM.render( <Mailbox unreadMessages={messages} />, document.getElementById(‘root‘));
{condition?(true expression)/true:(false expression)/ false}
此处可以是用表达式或者字符串都可以。如果是较为复杂的表达式,建议使用组件抽离
function WarningBanner(props) { if (!props.warn) { // 根据传入参数warn进行判断是否进行渲染,如果不进行渲染的话,return null。 return null; } return ( <div className="warning"> Warning! </div> ); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true}; this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(state => ({ showWarning: !state.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? ‘Hide‘ : ‘Show‘} </button> </div> ); } }
在组件的render函数中书写return null 并不会影响组件的生命周期函数的执行,例如上述组件的componentDidUpdate依旧会执行
标签:元素 extends banner page 变量 改变 null utc nbsp
原文地址:https://www.cnblogs.com/liyaping/p/11577366.html