Rerender родительский компонент в реакции

Question

Я изучаю React и TypeScript и пытаюсь написать форму для входа, но после проверки данных пользователя и создания cookie-файла я хочу переопределить родительский компонент.

У меня есть index.tsx (короткая версия):

import React from 'react';
import ReactDOM from 'react-dom';
import cookie from 'react-cookies'

function Main() {
    let hmCookies = cookie.loadAll();
    console.log(hmCookies.auth);
    if (hmCookies.auth === 'true') {
        return (<Logout />)
    } else {
        return (<Login />)
    }
}
ReactDOM.render(<Main />, document.getElementById('root'));

и Logint.tsx:

import React from 'react';
import cookie from 'react-cookies'

const axios = require('axios');
class Login extends React.Component<any, any> {
  ...
  handleSubmit(event) {
    axios.post('http://localhost/php/Login.php', {
      login: this.state.login,
      password: this.state.password
    }, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
      .then(function (response) {
        if (response.data.auth == true) {
          cookie.save('auth', true);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    event.preventDefault();
  }
  render() { return ( <LoginFormHere /> ) }
}
export default Login;

После публикации пользовательских данных в форме и выполнения запроса к PHP-скрипту через ajax, PHP возвращает ответ. Если это правда, сохраните cookie. Итак, после изменения файла cookie я хочу изменить компонент Main. Однако я понятия не имею, как это сделать, и я не могу найти никаких примеров этого в документации.

Как этого достичь?

Answer 1

Вы можете создать функцию в вашем Main компоненте для повторного рендеринга. Давайте назовем это - updateParent. Затем вы можете передать функцию updateParent компоненту Login как props и использовать ее, если response.data.auth == true. updateParent может быть реализовано как в следующем вопросе .

Вот пример .

Кроме того, вы можете использовать компонент с состоянием (класс) вместо функционала. Это позволяет использовать forceUpdate