有人可以解释如何确定我的父文件以解除状态吗？

Question

我正在尝试提升一个状态，以便我可以在某些页面上使用它，我正在努力弄清楚我应该在哪里引用这些状态，因为我不清楚我的父母会在哪里。这是我第一次设计应用程序，所以我的文件目录可能没有像应有的那样组织！我附上了我的文件目录的图片作为我的 app.js 的代码，所以你可以看到为什么我不只是在那里引用它们。或者我可以吗？

解决此问题的最佳方法是什么？任何洞察力都比您知道的要多得多！谢谢。

我正在尝试从 SignUpEmail 页面获取输入，更新其状态并将其发送到我的 CreatePassword 页面。

我觉得我没有尽力解释自己！更多上下文，请访问我的上一篇文章 -> How can I create a "global state" in react native so I can send a user input to another page?

app.js

export default class App extends Component {
 
  createHomeStack = () =>
  <NavigationContainer>
  <Stack.Navigator>
  <Stack.Screen name="SplashScreen" component= {SplashScreenPage} options={{headerShown: false}}/>
    <Stack.Screen name="Welcome" component= {WelcomePage} options={{headerShown: false}}/>
    <Stack.Screen name="Login" component= {LoginPage} options={{headerShown: false}}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmailPage} options={{headerShown: false}}/>
    <Stack.Screen name="CreatePassword" component= {CreatePasswordPage} options={{headerShown: false}}/>
    <Stack.Screen name="PhoneVerification" component= {PhoneVerificationPage} options={{headerShown: false}}/>
    <Stack.Screen name="Home" component= {HomePage} options={{headerShown: false}}/>
    <Stack.Screen name="YourName" component= {YourNamePage} options={{headerShown: false}}/>
    <Stack.Screen name="ProfilePicUpload" component= {ProfilePicUploadPage} options={{headerShown: false}}/>
    <Stack.Screen name="LikedPage" component= {LikedPage} options={{headerShown: false}}/>
  </Stack.Navigator>
  </NavigationContainer>
 
  render() {
    return (
      <View style={styles.welcomeScreen}>
       {this.createHomeStack()}
      </View>
  
    )
  }
}

Answer 1

通常在提升状态时，您会在 React 虚拟 DOM 树中选择最接近所有需要访问“共享状态”的组件的共同祖先。您的实际文件结构无关紧要。

从您的 sn-p App 看起来 成为 SignUpEmailPage 和 CreatePasswordPage 组件的共同祖先，因为它正在渲染两者，尽管您决定如何传递“共同”状态和回调来更新它是另一个练习。

您可以在App 中使用本地组件状态，创建上下文提供程序并包装公共祖先（每个组件都可以订阅上下文），或者您可以使用 redux 之类的东西进行全面的应用程序状态管理。这取决于您共享的共同状态需求。