是否可以在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