基本上，我有一个react组件，它的render()函数体如下所示:(这是我的理想之一，这意味着它目前不工作)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: logic only, code does not work here
if (this.props.hasImage) <ElementWithImage/>
else <ElementWithoutImage/>
</div>
)
}
当前回答
你应该记住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>
)
}
其他回答
if else结构的简写在JSX中可以正常工作
这个道具。hasImage ?<我的形象/>:< some therement >
你可以在DevNacho的这篇博客文章中找到其他选项，但更常见的是用速记。如果你需要一个更大的If子句，你应该写一个返回组件a或组件B的函数。
例如:
this.setState({overlayHovered: true});
renderComponentByState({overlayHovered}){
if(overlayHovered) {
return <OverlayHoveredComponent />
}else{
return <OverlayNotHoveredComponent />
}
}
你可以从中解构你的overlayhovers。状态，如果你给它作为参数。然后在render()方法中执行该函数:
renderComponentByState(这个state university)。
我用了一个三元运算符，它对我来说工作得很好。
{item.lotNum == null ? ('PDF'):(item.lotNum)}
如果你需要不止一个条件，那么你可以试试这个
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>
);
}
}
如果您想要一个条件来显示元素，您可以使用类似这样的东西。
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>}
你可以引入一个单独的方法来返回div元素并在return中调用它。我使用这种情况的例子，错误呈现取决于状态，如:
const renderError = () => {
if (condition)
return ....;
else if (condition)
return ....;
else if (condition)
return ....;
else
return ....;
}
render(){
return (
<div>
....
{renderError()}
</div>
);
}
