javascript - 如何在不渲染该状态的情况下访问另一个组件状态？

Question

用户登录后，我想在标题中显示名称。我一直在阅读有关如何传递 props 的内容，但我看到的是当您从另一个组件访问另一个组件状态时，您再次呈现了对另一个组件的洞察力。如何在不渲染其他组件的情况下访问另一个状态？在这里，我不想呈现 Header Component insight 我的 Login 组件和想知道

1. 我在这里重定向，以便我可以传递状态(但由于我重定向到“/”，这是 Home Component 而不是 Header Component，我仍然不知道如何在组件 header 中访问它。

2. 如果我不使用重定向，我如何将它传递给另一个人？

          class Header extends React.Component {
             render () {   
               return (
                   <header>
                     <nav>
                       <p className="menuButton"><Link to='/'>Home</Link></p>
                       <p className="menuButton"><Link to='/login'>Login</Link></p>
                      </nav>
                   </header>
                )
              }
           }
   

登录组件:

    class Login extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    username:'',
                    email: '',
                    password: ''
                }
                this.loginFunc = this.loginFunc.bind(this)
            }
       loginFunc(){
          ... getting user data ...
          this.setState({
                username:response.firstname
          })
        ...
         history.push('/', { username: response.firstname });
         history.go('/');
       }
   }

Answer 1

你可以有一个父 React 组件，你可以在其中跟踪状态 Header 和 Login 组件并通过 props 传递状态，或者您可以使用状态管理库，例如 Flux , Redux或 MobX或实现您自己的 PubSub 机制。如果不使用 vanilla React 中的父组件，您根本无法访问其他组件的状态，因为 React 使用单向数据流。

我建议查看状态管理库，但如果您坚持使用选项一，您可以执行以下操作:

1. 创建一个父组件，您可以在其中跟踪状态。该组件呈现 Header 和 Login 组件。将函数向下传递给登录组件(我们称之为 updateState)，以便登录组件可以在用户登录时调用它。
2. 让登录组件通过调用从父组件传递下来的 updateState() 函数来更新父组件中的状态 - 使用从登录操作接收到的数据。
3. 使用通过调用 updateState() 更改的父组件的新状态重新渲染 Header 组件。