基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</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();
}}
这对我很有用。：）
其他回答
没有一个答案提到短路法
{this.props.hasImage && <MyImage />}
当然，如果你想在else逻辑上呈现一些东西，你就不能使用它。 我从react的例子中学到了这个
在更深入的扫描中，我确实看到了@ZekeDroid的评论，但我将把它作为答案，因为它可能有用。
我不认为我看到这个解决方案的内联else if渲染，你有超过2个条件，所以我分享它:
{variable == 0 ?
<Element1/>
:variable == 1 ?
<Element2/>
:variable == 2 ?
<Element3/>
:
<Element4/>
}
类型1:If语句样式
{props.hasImage &&
<MyImage />
}
类型2:If else语句样式
{props.hasImage ?
<MyImage /> :
<OtherElement/>
}
下面的代码，你可以使用的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>);
}})()}
如果您想要一个条件来显示元素，您可以使用类似这样的东西。
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>}
