基本上，我有一个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这样的条件语句来呈现任何东西:
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>
);
}
其他回答
仅当:
{condition1 &&
(<div> condition1 true </div>)}
对于if和else:
{condition1 ?
(<div> condition1 true </div>)
:(<div> condition1 false </div>)}
if, else if, else:
{condition1 ?
(<div>condition1 true</div>)
:(condition2) &&
(<div>condition2 true</div>)
:(<div>both conditions false</div>)}
如果[…Else if]， Else 在React返回函数中检查不止一次?
{Element1? (<Element1/>) : Element2 ? (<Element2/>) : Element3 ? (<Element3/>) : Element... ? (<Element.../>) : (<ElementLast />)}
如果您想要一个条件来显示元素，您可以使用类似这样的东西。
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>}
没有一个答案提到短路法
{this.props.hasImage && <MyImage />}
当然，如果你想在else逻辑上呈现一些东西，你就不能使用它。 我从react的例子中学到了这个
在更深入的扫描中，我确实看到了@ZekeDroid的评论，但我将把它作为答案，因为它可能有用。
if then的简写
{ condition ? <Element1/> : null }
