如果使用逻辑
使用三元
我正在尝试使用内联if语句来检查一段数据是否存在以及是否显示它。此代码当前位于我的呈现、返回块中。
我遇到的问题是，使用这个，内容不再被呈现
{(() => {
if (this.props.data.size) {
<Text style={styles.headerLabel}>Sizes</Text>
{(this.props.data.size||[]).map((section,i) => (
<AddToCartRow key={i} data={section} productName={this.props.data.name} value={Config.priceToPriceWithCurrency(section.price)} />
))}
}
})()}
render(){
return(
<View>
{this.state.error && <Text style={{ color: 'red' }}>{this.state.errorMessage}</Text>}
<Text>Hello World!</Text>
</View>
);
}
给你。
下面的代码还检查空字符串。
render(){
return(
<View>
{!!this.state.error && <Text>{this.state.errorMessage}</Text>}
</View>
);
}
尝试使用以下eslint规则：
"no-restricted-syntax": [
"error",
...otherRules,
// Two rules below help us avoid this common point of confusion: https://stackoverflow.com/q/53048037
// The selectors are inspired by https://github.com/yannickcr/eslint-plugin-react/issues/2073#issuecomment-844344470
{
selector:
":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='&&']",
message:
"Please use `condition ? <Jsx /> : null`. Otherwise, there is a chance of rendering '0' instead of '' in some cases. Context: https://stackoverflow.com/q/53048037",
},
{
selector:
":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='||']",
message:
"Please use `value ?? fallbackValue`. Otherwise, there is a chance of rendering '0' instead of '' in some cases. Context: https://stackoverflow.com/q/53048037",
},
],
链接：https://github.com/yannickcr/eslint-plugin-react/issues/2073#issuecomment-864168062
通常，React Native中的条件渲染与React中的条件呈现相同。但请注意，在React Native中，我们只能在Text组件内部呈现字符串。因此，例如，如果我们试图将一个字符串放入View中，它将抛出一个错误。
如果使用逻辑&&运算符，则内联
<View>
{!!error && <ErrorMessage />}
</View>
⚠️二重否定!!运算符在这里非常重要(我们也可以使用Boolean函数)，因为它确保条件的左侧部分将是布尔值。
为什么它很重要？因为如果左侧是truthy，逻辑"one_answers"运算符&&将返回条件的右侧，如果左侧是falsy，则返回条件的左侧。
成像我们有一个组件：
<View>
{error && <ErrorMessage />}
</View>
如果error变量将是object/null/undefined，则一切都将按预期工作。但是，如果我们将为错误获得一个空字符串(错误=")，那么我们的组件将停止，因为我们无法在View组件内呈现字符串。
// error = ''
// {error && <something>} will return the error variable (which equals to '')
// and we will get:
<View>
''
</View>
// which will throw an error (can't render strings inside a View )
使用三元?运算符内联if-else
{error ? <ErrorMessage /> : <SuccessMessage />}
或
{error ? <ErrorMessage /> : null}
在这里，我们可以根据组件结构和返回类型返回null或<></>(React Fragment)。
if语句
...
const Error = () => {
if (!error) {
return null
}
return <ErrorMessage />
}
return (
<View>
<Error />
</View>
)
代码示例
请使用此Expo Snack查看完整代码并使用它。