Question

首先，我创建了一个像

这样的renderIf.js

export default function renderIf (condition, content) {
if(condition)
{
    return content;
}
else
{
    return null;
}}

在此之后我在我的rootnavigation.js中导入renderIf.js，但是有些事情出错了。

render () {
    return(
        renderIf(this.state.tokenStatus,
            <LoginNavigator />
        ),
        renderIf(!this.state.tokenStatus,
            <RootStackNavigator />
        )
    )
}

如果tokenStatus false renderIf工作但是当我给它真的只是一个空白的屏幕。我在哪里做错了？

Answer 1

您在return语句中使用了逗号（，）

render() {
    return (
       ....
       ,
       ....
    );
}

这导致最后一个语句成为渲染函数的最终语句。因此，只有有效的陈述方法是

renderIf(!this.state.tokenStatus,
    <RootStackNavigator />
)

因此，如果token为false，那么您将获得一个有效的解决方案，否则将从render方法返回null。

希望这会有所帮助！

<强>更新

一个可行的解决方案是使用render方法返回一个数组。

请考虑以下代码段

export default function renderIf(condition, comp) {
    return condition ? comp : null;
}

render () {
  return([
    renderIf(this.state.tokenStatus,
        <LoginNavigator />
    ),
    renderIf(!this.state.tokenStatus,
        <RootStackNavigator />
    )
  ])
}

Answer 2

如果函数调用是返回的JSX的一部分，则需要用大括号包装函数调用。但是对于您的代码，一个简单的三元语句可以：

render () {
    return this.state.tokenStatus ? (<LoginNavigator />) : (<RootStackNavigator />);
}

React Native在渲染方法中调用函数

2 个答案: