基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
如果你想使用If, else If和else则使用此方法
{this.state.value === 0 ? (
<Component1 />
) : this.state.value === 1 ? (
<Component2 />
) : (
<Component3 />
)}
其他回答
如果你需要不止一个条件，那么你可以试试这个
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>
);
}
}
尝试使用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>
)
}
这招对我管用，对你也适用。 尝试三元运算符
四种条件渲染方式
(在功能组件的返回语句或类组件的渲染函数的返回语句中)
三元运算符
return (
<div>
{
'a'==='a' ? <p>Hi</p> : <p>Bye</p>
}
</div>
)
注意:只有条件'a'==='a'为真时，<p>Hi</p>才会在屏幕上显示。否则，<p>Bye</p>将显示在屏幕上。
逻辑运算符
和& &
return (
<div>
{
'a'==='a' && <p>Hi</p>
}
</div>
)
注意:只有条件'a'==='a'为真时，<p>Hi</p>才会在屏幕上显示。
或| |
export default function LogicalOperatorExample({name, labelText}) {
return (
<div>
{labelText || name}
</div>
)
}
注意:如果labelText和name两个道具都被传递到这个组件中，那么labelText将在屏幕中呈现。但如果只有一个(name或labelText)作为道具传递，那么传递的道具将在屏幕中呈现。
如果，否则，否则如果
return (
<div>
{
(() => {
if('a'==='b') {
return (
<p>Hi</p>
)
} else if ('b'==='b') {
return (
<p>Hello</p>
)
} else {
return (
<p>Bye</p>
)
}
})()
}
</div>
)
注意:必须使用匿名函数(还需要立即调用该函数)
Switch语句
return (
<div>
{
(() => {
switch(true) {
case('a'==='b'): {
return (
<p>Hello</p>
)
}
break;
case('a'==='a'): {
return (
<p>Hi</p>
)
}
break;
default: {
return (
<p>Bye</p>
)
}
break;
}
})()
}
</div>
)
注意:必须使用匿名函数(还需要立即调用该函数)
实际上有一种方法可以完全满足OP的要求。只需要像这样渲染和调用一个匿名函数:
render () {
return (
<div>
{(() => {
if (someCase) {
return (
<div>someCase</div>
)
} else if (otherCase) {
return (
<div>otherCase</div>
)
} else {
return (
<div>catch all</div>
)
}
})()}
</div>
)
}
也许我来晚了。但我希望这能帮助到一些人。首先分离这两个元素。
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();
}}
这对我很有用。：）
