如何在不呈现该状态的情况下访问另一个组件状态？

Question

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

1. 这里我重定向，所以我可以传入状态（但由于我重定向到'/'，它是主组件而不是标题组件，我仍然不知道如何在组件标题中访问它。

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 组件。将一个函数向下传递给 Login 组件（我们将其称为 updateState），以便 Login 组件可以在用户登录时调用它。
2. 让 Login 组件通过调用从 Parent 组件传递下来的 updateState() 函数更新父组件中的状态 - 使用从 Login 操作接收到的数据。
3. 使用来自父组件的新状态重新渲染 Header 组件，该状态已通过调用 updateState() 进行更改。