基本上，我有一个react组件，它的render()函数体如下：（这是我理想中的一个，这意味着它目前不起作用）
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
if (this.props.hasImage) <MyImage />
else <OtherElement/>
</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 在评论中提出的内容。如果您只是检查条件并且不想呈现不符合要求的特定代码段，则可以使用&& operator.
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</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>
)
}
您可以使用任何渲染conditional声明一样if，else：
render() {
const price = this.state.price;
let comp;
if (price) {
comp = <h1>Block for getting started with {this.state.price}</h1>
} else {
comp = <h1>Block for getting started.</h1>
}
return (
<div>
<div className="gettingStart">
{comp}
</div>
</div>
);
}
类型一： If陈述风格
{props.hasImage &&
<MyImage />
}
类型 2： If else陈述式
{props.hasImage ?
<MyImage /> :
<OtherElement/>
}
您应该记住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>
)
}