Блог

Привет, ребята, у меня такой вопрос.

У меня есть токен, хранящийся в AsyncStorage. Как мне поступить, если token = = = null я загрузил кнопку 1 на страницу, и если что-то загружено в маркерную кнопку 2?

Пожалуйста, помогите мне.

Лучший способ выполнить условную отрисовку — использовать состояния. Сначала создайте переменную состояния, которая будет содержать ваше условие с начальным значением или без него, в зависимости от вашей логики.

 this.state = { conditionalVariable : false }
  

Во-вторых, создайте переменную, которая будет содержать ваш 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>
  

Таким образом, всякий раз, когда ваше состояние обновляется, ваши представления будут повторно визуализироваться.

Вопрос мог бы быть более ясным, но существует так много способов получить разные результаты. Вот только один случайный базовый способ.

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

Вы также могли бы просто изменить свойства на основе значения или выполнить другие возвраты внутри рендеринга или другой функции…

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

Предполагая, что ваш token находится в состоянии, вы могли бы выполнить следующее условное (троичное):

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