如何使用props访问不同的组件

Question

我正在尝试从我的Login.jsx组件访问状态，但我目前正在使用您登录后显示的UI.jsx组件。

我的登录组件中的注销按钮应该在您的状态设置为登录时呈现，但我不想从Login.jsx呈现它。我想从UI.jsx渲染它。

按钮显示一旦我没有安装任何组件，但是一旦我加载它就会接管UI并且它不会显示。我的所有州都在登录，但是应该有办法从UI访问它，对吗？

Answer 1

我不确定我了解你的情况，但你可以通过ref访问组件方法。例如，如果您的UI组件按如下方式声明其Login：

<Login/>

你可以这样做：

<Login ref={(r)=>this.login=r}/>

然后你可以使用this.login.method（）从UI的方法访问Login的方法。

顺便说一下，在UI组件中存储登录状态并使用处理程序更新它不是更好吗？

<Login handler={(ok)=>this.setState({loggedIn: ok})} />

然后在Login组件方法中检查login：

doLogin () {
  const ok = //check login
  this.props.handler(ok);
}