如何访问另一个组件状态而不呈现该状态？

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

在这里，我重定向这样我就可以在该州通过的（但因为我重定向到“/”作为主成分，而不是标题组件，我还是不知道如何访问它的成分标题

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

 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('/'); 
     } 
    }

来源

2017-08-06 javascripting

这是不可能的。为了获得数据登录，你也必须在页面上显示页眉。除非你使用像flux，redux这样的东西有一个很大的可共享状态。 – Nicholas

你应该使用像redux，flux这样的状态管理器。 –

您可以有一个父阵营中，你跟踪状态都页眉和登录组件，并通过道具通过国家，或你可以使用状态管理库组件，如Flux，Redux或MobX或实施您自己的PubSub机制。如果没有在vanilla React中使用父组件，您就无法访问其他组件的状态，因为React使用单向数据流。

我建议寻找到状态管理库，但如果你坚持要用一个选项，你会做以下几点：

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

来源

2017-08-06 16:36:01 afterburn

谢谢你的回答。如果我有用于登录和标题的组件，是否仍然可以将标题传递给我的应用程序组件（即呈现家庭组件和标头组件的组件）。我不能只是一起渲染标题和登录，而是让应用程序的其余部分没有标题。 – javascripting

你应该能够在你的App组件中导入/需要你的Header组件。但是我理解你的设置的方式为什么不在我的应用程序组件中创建updateState函数并将状态存储在那里？传递updateState函数使用道具到你的登录组件，并在用户登录时调用函数。接下来使用道具从App组件传递状态到你的Header组件。 – afterburn

我可以这样做，如果我也没有渲染登录洞察应用程序组件？我的应用程序呈现标题和主要，主要是我有我的地方 – javascripting

如何访问另一个组件状态而不呈现该状态？

回答

相关问题