Как перейти от дочернего компонента к другой странице

Question

У меня есть Login. js и List. js в папке 'pages', а Form. js в папке 'component'. Форма. js - дочерний компонент Login. js. Когда я хочу перейти от Login. js к List. js, я просто использую onPress={() => this.props.navigation.navigate('List'), но если я использую тот же код в Form. js, он говорит: Undefined не является объектом (оценка '_this2.props .navigation.navigate ')

Answer 1

Я не вижу ваш код, поэтому не могу сказать, что это именно то, что вы ищете, но попробуйте что-нибудь вроде этого:

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 />
  )
}

Answer 2

Вы можете передать функцию из входа в форму для выполнения этой функции из входа

Форма компонента функции

const Login = props => {
    const goToList = () => {
        this.props.navigation.navigate('List')
    }

    return (
        <Form redirectList={goToList} />
    )
}

const Form = props => {
    props.redirectList()  // This will execute the navigate from Login component
}

Форма компонента класса

class Login extends React.Component {
    constructor(props){
        super();
        this.goToList = function(){
            this.props.navigation.navigate('List')
        }
    }

    render(){
        return (
            <Form redirectList={this.goToList} />
        )
    }
}

class Form extends React.Component {
    constructor(props){
        super();
        this.redirectToList = function(){
            props.redirectList();
        }
    }
    // You can redirect to list using
    this.redirectToList();
}