基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
仅当:
{condition1 &&
(<div> condition1 true </div>)}
对于if和else:
{condition1 ?
(<div> condition1 true </div>)
:(<div> condition1 false </div>)}
if, else if, else:
{condition1 ?
(<div>condition1 true</div>)
:(condition2) &&
(<div>condition2 true</div>)
:(<div>both conditions false</div>)}
其他回答
如果你想使用If, else If和else则使用此方法
{this.state.value === 0 ? (
<Component1 />
) : this.state.value === 1 ? (
<Component2 />
) : (
<Component3 />
)}
尝试使用Switch case或三元操作符
render(){
return (
<div>
<Element1/>
<Element2/>
// updated code works here
{(() => {
switch (this.props.hasImage) {
case (this.props.hasImage):
return <MyImage />;
default:
return (
<OtherElement/>;
);
}
})()}
</div>
)
}
这招对我管用，对你也适用。 尝试三元运算符
如果[…Else if]， Else 在React返回函数中检查不止一次?
{Element1? (<Element1/>) : Element2 ? (<Element2/>) : Element3 ? (<Element3/>) : Element... ? (<Element.../>) : (<ElementLast />)}
也许我来晚了。但我希望这能帮助到一些人。首先分离这两个元素。
renderLogout(){
<div>
<LogoutButton onClick={this.handleLogoutClick} />
<div>
}
renderLogin(){
<div>
<LoginButton onClick={this.handleLoginClick} />
<div>
}
然后你可以使用if else语句从render function调用这些函数。
render(){
if(this.state.result){
return this.renderResult();
}else{
return this.renderQuiz();
}}
这对我很有用。：）
没有一个答案提到短路法
{this.props.hasImage && <MyImage />}
当然，如果你想在else逻辑上呈现一些东西，你就不能使用它。 我从react的例子中学到了这个
在更深入的扫描中，我确实看到了@ZekeDroid的评论，但我将把它作为答案，因为它可能有用。
