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

Question

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

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

渲染它

按钮在我没有安装任何组件时显示，但 UI 在我加载它时立即接管并且它不会显示。我的所有状态都在登录中，但应该有一种方法可以从 UI 访问它，对吗？

Answer 1

我不确定我是否理解你的情况，但你可以通过 ref 访问组件方法。例如，如果您的 UI 组件声明其登录如下：

<Login/>

你可以这样做：

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

然后您可以使用 this.login.method() 从 UI 的方法访问 Login 的方法。

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

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

然后在检查登录的登录组件方法中：

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