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;

以表格形式发布用户数据并通过ajax向PHP脚本提出请求后，PHP返回响应。如果是真的，请保存cookie。因此，更改Cookie后，我想重新呈现组件Main。但是，我不知道如何执行此操作，在文档中也找不到任何示例。

如何实现？

Answer 1

您可以在Main组件中创建一个函数以重新呈现。我们称它为updateParent。然后，您可以将updateParent函数作为Login传递给props组件，并在response.data.auth == true时使用。 updateParent可以像following question中那样实现。

Here the example。

此外，您可以使用有状态（类）组件而不是功能组件。这使您可以使用forceUpdate

React中的渲染父组件

1 个答案: