Question

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

这里我重定向所以我可以传入状态（但由于我重定向到＆＃39; /＆＃39;这是Home Component而不是Header Component，我仍然不知道如何访问它在组件标题中。

如果我没有使用重定向，我该如何将其传递给另一个？

       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机制。你根本无法访问其他组件＆＃39;不使用vanilla React中的父组件的状态，因为React使用单向数据流。

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

创建一个用于跟踪状态的父组件。该组件呈现Header和Login组件。将函数传递给Login组件（我们将调用updateState），因此Login组件可以在用户登录时调用它。
让Login组件通过调用从Parent组件传递的updateState（）函数来更新父组件中的状态 - 使用从Login操作接收的数据。
使用通过调用updateState（）更改的Parent组件重新呈现具有新状态的Header组件。

如何访问其他组件状态而不呈现该状态？

1 个答案: