基本上，我有一个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或三元操作符更简洁。
其他回答
如果您想要一个条件来显示元素，您可以使用类似这样的东西。
renderButton() {
if (this.state.loading) {
return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
}
return (
<Button onPress={this.onButtonPress.bind(this)}>
Log In
</Button>
);
}
然后调用渲染函数中的帮助方法。
<View style={styles.buttonStyle}>
{this.renderButton()}
</View>
或者你也可以用另一种方法在return中设置条件。
{this.props.hasImage ? <element1> : <element2>}
实际上有一种方法可以完全满足OP的要求。只需要像这样渲染和调用一个匿名函数:
render () {
return (
<div>
{(() => {
if (someCase) {
return (
<div>someCase</div>
)
} else if (otherCase) {
return (
<div>otherCase</div>
)
} else {
return (
<div>catch all</div>
)
}
})()}
</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, else If和else则使用此方法
{this.state.value === 0 ? (
<Component1 />
) : this.state.value === 1 ? (
<Component2 />
) : (
<Component3 />
)}
下面的代码，你可以使用的If条件反应在侧返回
{(() => {if (true) {return ( <div><Form>
<Form.Group as={Row} style={{ marginLeft: '15px', marginRight: '15px', marginBlock: '0px' }} >
<Form.Label className="summary-smmdfont" style={{ flex: '1 0 auto', marginBlock: '0px' }}> uyt</Form.Label>
<Form.Label className="summary-smmdfont"style={{ textAlignLast: 'Right', flex: '1 0 auto', marginBlock: '0px' }}>
09</Form.Label>
</Form.Group>
</Form>
</div>);
}})()}
