基本上，我有一個react元件，它的render()函數體如下：（這是我的理想元件，這意味著它目前不起作用）
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
其實有一種方法可以完全滿足OP的要求。只需渲染並呼叫匿名函數，如下所示：
render () { return (
{(() => {
if (someCase) {
return (
someCase
)
} else if (otherCase) {
return (
otherCase
)
} else {
return (
catch all
)
}
})()}
)
}不完全一樣，但有解決方法。 React 文件中有一個關於條件渲染的部分，您應該看一下。以下是使用內聯 if-else 可以執行的操作的範例。
render() { const isLoggedIn = this.state.isLoggedIn; return (
{isLoggedIn ? (
);
}您也可以在渲染函數內處理它，但在傳回 jsx 之前。
if (isLoggedIn) { button =
);也值得一提的是 ZekeDroid 在評論中提出的內容。如果您只是檢查條件並且不想呈現不符合條件的特定程式碼段，則可以使用
&& 運算子。return (
);Hello!
{unreadMessages.length > 0 &&You have {unreadMessages.length} unread messages.
}