基本上,我有一个react组件,它的render()函数体如下:(这是我理想的一个,这意味着它目前不起作用)
render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here if (this.props.hasImage) <MyImage /> else <OtherElement/> </div> ) }
不完全是这样,但有一些解决方法.在
React’s docs中有一个关于条件渲染的部分,你应该看看.以下是使用内联if-else可以执行的操作的示例.
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
你也可以在渲染函数中处理它,但在返回jsx之前.
if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> );
值得一提的是ZekeDroid在评论中提到的内容.如果您只是检查条件并且不想呈现不符合的特定代码,则可以使用&&操作符.
return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。