基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
如果你有2个不同的依赖关系，你也可以在条件操作符中使用条件(三元)操作符。
{
(launch_success)
?
<span className="bg-green-100">
Success
</span>
:
(upcoming)
?
<span className="bg-teal-100">
Upcoming
</span>
:
<span className="bg-red-100">
Failed
</span>
}
其他回答
if then的简写
{ condition ? <Element1/> : null }
if else结构的简写在JSX中可以正常工作
这个道具。hasImage ?<我的形象/>:< some therement >
你可以在DevNacho的这篇博客文章中找到其他选项，但更常见的是用速记。如果你需要一个更大的If子句，你应该写一个返回组件a或组件B的函数。
例如:
this.setState({overlayHovered: true});
renderComponentByState({overlayHovered}){
if(overlayHovered) {
return <OverlayHoveredComponent />
}else{
return <OverlayNotHoveredComponent />
}
}
你可以从中解构你的overlayhovers。状态，如果你给它作为参数。然后在render()方法中执行该函数:
renderComponentByState(这个state university)。
如果[…Else if]， Else 在React返回函数中检查不止一次?
{Element1? (<Element1/>) : Element2 ? (<Element2/>) : Element3 ? (<Element3/>) : Element... ? (<Element.../>) : (<ElementLast />)}
我找到了一个我认为比“如果-否则”更好的解决方案。应该使用2条return语句。看到的例子:
render() {
const isLoggedIn = this.state.isLoggedIn;
if (isLoggedIn) {
return <LogoutButton onClick={this.handleLogoutClick} />
}
// This will never occur if the user is logged in as the function is returned before that.
return <LoginButton onClick={this.handleLoginClick} />
}
这比在return语句中使用if-else或三元操作符更简洁。
你应该记住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>
)
}
