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

Question

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

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

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

我觉得我没有尽力解释我自己！有关更多上下文，请访问我的最后一个 post -> 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

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

根据您的代码段 App 看起来 是 SignUpEmailPage 和 CreatePasswordPage 组件的共同祖先，因为它正在渲染这两个组件，尽管如何你决定传递“公共”状态和回调来更新它是另一个练习。

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

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

Could someone explain how to determine my parent file in order to lift a state?

javascript

reactjs

react-native

react-context