基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
我找到了一个我认为比“如果-否则”更好的解决方案。应该使用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或三元操作符更简洁。
其他回答
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)。
如果你需要不止一个条件，那么你可以试试这个
https://www.npmjs.com/package/react-if-elseif-else-render
import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';
class Example extends Component {
render() {
var i = 3; // it will render '<p>Else</p>'
return (
<If condition={i == 1}>
<Then>
<p>Then: 1</p>
</Then>
<ElseIf condition={i == 2}>
<p>ElseIf: 2</p>
</ElseIf>
<Else>
<p>Else</p>
</Else>
</If>
);
}
}
是的，你可以在JSX渲染中使用条件。你可以在这里阅读更多。
语法:
condition ? exprIfTrue : exprIfFalse
条件声明必须如下所示，这里有一个例子:
return (
<div>
{condition ? (
//do some actions if condition is true
) : (
//do some actions if condition is false
)}
</div>
)
我不认为我看到这个解决方案的内联else if渲染，你有超过2个条件，所以我分享它:
{variable == 0 ?
<Element1/>
:variable == 1 ?
<Element2/>
:variable == 2 ?
<Element3/>
:
<Element4/>
}
if then的简写
{ condition ? <Element1/> : null }
