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

Question

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

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

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

       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 组件并通过道具传递状态，或您可以使用状态管理库，例如 Flux, Redux or MobX 或实现您自己的 PubSub 机制。如果不使用 vanilla React 中的父组件，您根本无法访问其他组件的状态，因为 React 使用单向数据流。

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

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

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

How to access another components state without rendering that state?

javascript

setstate

reactjs