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

Posted 2023-02-23

【中文标题】如何使用 props 访问不同的组件

【英文标题】：How to access different components using props

【发布时间】：2017-11-08 17:40:18

【问题描述】：

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

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

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

【问题讨论】：

您好，欢迎来到 ***。请花一些时间阅读帮助页面，尤其是名为"What topics can I ask about here?" 和"What types of questions should I avoid asking?" 的部分。更重要的是，请阅读the Stack Overflow question checklist。您可能还想了解Minimal, Complete, and Verifiable Examples。

【参考方案1】：

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

<Login/>

你可以这样做：

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

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

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

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

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

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