Передача значения из дочернего элемента в родительский React

Question

Есть код

let token1234 = null

const HomeStackScreen = () => (
  <Stack.Navigator>
    {
      token1234 == null ? (
        <Stack.Screen name='Full' update component={Full} options={{ headerShown: false, headerStyle: { elevation: 0 }, animationEnabled: false }} />
      )
      :
       (
        <Stack.Screen name='Home' component={HomeScreen} options={{ headerTitle: 'Chats', headerTitleStyle: { fontWeight: 'bold', fontSize: 25 }, headerStyle: { elevation: 0 }, headerShown: false }} />

      )
    }
  </Stack.Navigator>
)

Как правильно написать код на странице Full, чтобы при клике там на кнопку, token1234 изменился на значение и последующие разы отображалась страница Home

Answer 1

import React, { useState } from 'react';

const HomeScreen = () => {
  const [token, setToken] = useState(null);
  const updateToken = value => {
    setToken(value)
  }
  
  if (token) {
    return  <Stack.Screen name='Home' updateToken={updateToken} />
  } else {
    return  <Stack.Screen name='Full' updateToken={updateToken} />
  }
}

Затем в компоненте Stack.Screen вы получите пропс updateToken, который я передал выше и по клику на кнопку передатите туда значение токена. У компонента HomeScreen обновится состояние, это вызовет его перерендер. А так как token уже будет, то он отрендерит вам вариант из else

БЛОГ НА HUSL

Передача значения из дочернего элемента в родительский React

Ответы (1 шт):