Question

大家好，我有这样的问题。

我在AsyncStorage中存储了一个令牌。如果token = = = null我在页面上加载了按钮1，并且令牌2中加载了某些内容，该怎么办？

请帮助我。

Answer 1

问题可能更清楚，但是有很多方法可以得出不同的结果。这只是一种随机的基本方法。

<div>
    {token === null
        ? <Button1 />
        : <Button2 />
    }
</div>

您还可以根据值更改属性，或在渲染器或其他函数中执行不同的返回...

https://reactpatterns.com/#conditional-rendering

Answer 2

进行条件渲染的最好方法是利用状态。首先，根据您的逻辑，创建一个状态变量，该状态变量将保留您的条件（有无初始值）。

this.state = { conditionalVariable : false }

第二，在render方法内创建一个变量，该变量将保存要渲染的JSX。 `

render() {
...
let conditionalContent = null;
...
}

第三，异步存储中的令牌可用后，立即更新/设置状态。

this.setState({ conditionalVariable : token })

返回之前，请根据何时返回的标记来编写逻辑。 `

if (conditionalVariable == token1)
    conditionalContent = '<Button1 />';
 else if (conditionalVariable == token2)
    conditionalContent = '<Button2 />';
 else
    conditionalContent = ''; // dont display

最后，在您的申报表内，在{}中使用您的变量。

<View>{conditionalContent}</View>

这样，只要您的状态得到更新，您的视图就会重新呈现。

Answer 3

假设您的token处于状态，则可以执行以下条件（三元）：

<View>
  {!this.state.token ? <Button1 /> : <Button2 />}
</View>

渲染项目|反应本机

3 个答案: