Javascript 如何从子组件导航到其他页面

我在“页面”文件夹中有Login.js和List.js，而Form.js在“组件”文件夹中。Form.js是Login.js的子组件。当我想从Login.js导航到List.js时，我只需使用

onPress={（）=>this.props.navigation.navigate（'List'）

，但如果我在Form.js中使用相同的代码，它会说：Undefined不是一个对象（评估'\u this2.props.navigation.navigation'）

您可以将一个函数从Login传递到表单，以从Login执行该函数

功能组件形式

const Login=props=>{
康斯特哥特利斯特=（）=>{
this.props.navigation.navigate（'List'））
}
返回(
)
}
const Form=props=>{
props.redirectList（）//这将执行从登录名导航组件
}

类组件形式

类登录扩展了React.Component{
建造师（道具）{
超级（）；
this.goToList=函数（）{
this.props.navigation.navigate（'List'））
}
}
render（）{
返回(
)
}
}
类形式扩展了React.Component{
建造师（道具）{
超级（）；
this.redirectToList=函数（）{
props.redirectList（）；
}
}
//您可以使用以下命令重定向到列表：
this.redirectToList（）；
}

我看不到您的代码，因此我无法确定这正是您要查找的代码，但请尝试以下操作：

import React from 'react'
import { withRouter } from 'react-router-dom'

export function Form() {
  const ListBtn = withRouter(({ history }) => (
    <button onClick={() => {history.push('/list')}}>
      Go to list
    </button>
  ))

  return (
    <ListBtn />
  )
}

从“React”导入React
从“react router dom”导入{withRouter}
导出函数表单（）{
const ListBtn=withRouter（{history}）=>(
{history.push（'/list'）}>
转到列表
))
返回(
)
}

在这一行中显示：未定义不是对象（评估“\u this.props.navigation.navigate”）@AbhijeetGupta如果使用类表单，它应该是

this.goToList

Thnx它起作用了，但这是唯一的方法吗..我不能直接使用createStackNavigator@AbhijeetGupta可能有,，但是，如果不知道您正在使用什么库以及如何实现它们，我无法提供更多帮助，顺便说一句，您还可以将

this.props.navigation

作为一个道具传递到表单，这样您也可以从表单执行

this.props.navigation.navigate（'List'）