我在我的应用中有这种情况：

Question

ChildInput

时，ChildInput的值是

this.childRef.current

，直到我通过单击来手动专注于输入为止。之后，分配了

null

的值。

您可以在控制台中跟踪此转换。 

current

log出现一次，但其价值通过单击后，手动关注输入后会发生变化。

我的最终目标是以这种方式进行样式的GrandChildInput工作，但是作为中介步骤，我正在尝试使未风格的组件工作。我能够在我的本地项目中实现此结果（使用未经风格的组件）：

回答16.4.2风格的组件3.4.2

但是，当涉及在代码框中使用项目中安装的版本通过上面的链接进行的版本时，甚至出于某种原因，即使关注非风格的孙子孙女组件也不起作用。

当我单击Child Input时，我可以将应用程序重点放在GrandChildInput组件上？

当您尝试使用REF将

this.childRef.current

处理程序分配给DIV时，它将尝试立即从Ref访问

div
• ，但是由于尚未分配给输入组件，其值将为null，因此您会遇到该错误。
对于打印的值，在控制台中正确，它与控制台如何评估值有关。
onClick

将提供有关该的更多详细信息

，为了解决您的问题，您需要做的是通过包装另一个功能来调用

handleFocus

函数，以便仅在单击时对其进行评估。

This answer

Answer 1

，如果您想知道为什么自己的方式不起作用。这是因为没有任何原因导致渲染方法再次调用，因此在分配和可用后，将正确的函数分配给

handleFocus

。

工作代码box

要添加到

@@shubhamkhatri

为那些难以执行相同操作的人的答案，但是当孙子词是一个

<div
  onClick={() => this.childRef.current.handleFocus()}
  style={{ border: "1px solid black", padding: 5 }}
>
  click me
  <GrandChildInput
    type="text"
    disabled
    focused
    length={5}
    ref={this.childRef}
  />
</div>

时，并且版本是

onClick

。

通过他的实施，您可能会得到

styled-component

。

在这种情况下，将样式组件上的them in命名为

styled-component

4 please给

Answer 2

读。 this允许将refs从父级向下传递，作为辅助参数（第一个参数是Props）。但是，这无济于事...这就是我目前正在与大声笑的斗争...