如何解决React Native中的条件渲染
我对响应本机代码和一般代码感到很陌生。我需要根据一些变量渲染文本(见下文)。
如果isPlayer === true && base.length === 1
,则渲染x
否则isPlayer === true && base.length > 1
渲染y
其他渲染z
下面是我正在处理的代码段,并已标记需要在何处呈现文本。我尝试用if / else逻辑编写一个函数,然后调用该函数,但没有使其正常工作。我知道使用JSX可以内联条件渲染,但也无法使其正常工作。任何和所有帮助表示赞赏!预先感谢!
<View style={{ marginTop: marginTopAdj,flexDirection: 'row' }}>
<TouchableOpacity onPress={() => navigation.goBack()} style={{}}>
{IconWhiteBackButton}
</TouchableOpacity>
<HeaderTitle
containerStyle={styles.headerTitleContainer}
textStyle={{ color: '#fff' }}
>
{Item to be conditionally rendered}
</HeaderTitle>
</View>
解决方法
<View style={{ marginTop: marginTopAdj,flexDirection: 'row' }}>
<TouchableOpacity onPress={() => navigation.goBack()} style={{}}>
{IconWhiteBackButton}
</TouchableOpacity>
<HeaderTitle
containerStyle={styles.headerTitleContainer}
textStyle={{ color: '#fff' }}
>
{isPlayer === true && base.length === 1 && <ItemX/>}
{isPlayer === true && base.length > 1 && <ItemY/>}
</HeaderTitle>
</View>
对于更复杂的逻辑,请创建一个新函数:
renderItemConditionally = () => {
if (...) return <ItemX/>;
else if (...) return <ItemY/>;
else return <ItemZ/>;
}
阅读this以获得更多信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。