是否可以在React render函数中使用if ... else ...语句?

基本上,我有一个react组件,其render()功能主体如下:(这是我的理想组件,这意味着它当前不起作用)

render(){

return (

<div>

<Element1/>

<Element2/>

// note: code does not work here

if (this.props.hasImage) <MyImage />

else <OtherElement/>

</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

  return (

<div>

<h1>Hello!</h1>

{unreadMessages.length > 0 &&

<h2>

You have {unreadMessages.length} unread messages.

</h2>

}

</div>

);

以上是 是否可以在React render函数中使用if ... else ...语句? 的全部内容, 来源链接: utcz.com/qa/434221.html

回到顶部