基本上，我有一个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>)}
其他回答
不完全是那样，但也有变通办法。React文档中有一节是关于条件渲染的，你应该看一看。下面是一个使用内联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>
);
很多很棒的答案，但我还没有看到使用对象映射到不同的视图
const LOGS = {
info: <Info />,
warning: <Warning />,
error: <Error />,
};
const Notification = ({ status }) => <div>{LOGS[status]}</div>
if then的简写
{ condition ? <Element1/> : null }
你可以引入一个单独的方法来返回div元素并在return中调用它。我使用这种情况的例子，错误呈现取决于状态，如:
const renderError = () => {
if (condition)
return ....;
else if (condition)
return ....;
else if (condition)
return ....;
else
return ....;
}
render(){
return (
<div>
....
{renderError()}
</div>
);
}
你应该记住TERNARY运算符
:
你的代码是这样的，
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
{
this.props.hasImage ? // if has image
<MyImage /> // return My image tag
:
<OtherElement/> // otherwise return other element
}
</div>
)
}
