基本上,我有一个react组件,它的render()功能体如下:(这是我的理想,这意味着它目前不工作)
render()
render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here if (this.props.hasImage) <ElementA/> else <ElementB/> </div> ) }
不完全一样,但有解决方法。React 的文档中有一个关于条件渲染的部分,你应该看看。这是使用内联 if-else 可以执行的操作的示例。
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
您也可以在 render 函数中处理它,但在返回 jsx 之前。
if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> );
还值得一提的是 ZekeDroid 在评论中提出的内容。如果您只是检查条件并且不想呈现不符合要求的特定代码,您可以使用&& operator.
&& operator
return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> );