React Access 父组件名称答案

【问题标题】：React Access parent component nameReact Access 父组件名称
【发布时间】：2015-11-02 09:15:00
【问题描述】：

我想在子组件中获取父组件名称，以便在验证该子组件的属性时显示错误消息。我正在创建一个可重用的组件，所以任何人都可以在他们的组件中使用我的组件。当他们使用我的组件时，我想显示带有父组件名称的警告消息。

是否有特定方法可以在反应中获取父名称。任何形式的帮助将不胜感激。

【问题讨论】：

【解决方案1】：

孩子们可以通过以下方式看到他们组成的上下文：

this._reactInternalInstance._currentElement._owner._instance.__proto__.constructor.name

例如：

import React, { Component } from 'react';

class Warning extends Component {
    render() {
        return (
            <div>{
                "WARNING: " + this._reactInternalInstance._currentElement._owner._instance.__proto__.constructor.name + " has an error."
            }</div>
        );
    }
}

export default Warning;

不要相信这是亲子交流。这就像站在一个房间里，从你所在的地方看到围墙。这不是与您（子）通信的容器（父），而是与上下文相关的子。

如果你必须使用它，但请注意它是 React 内部实例的一部分并且可能会发生变化（请相信它在今天已经足够稳定了）。

【讨论】：

我不确定这是否一定更好，但我会在这里发布它以防它帮助某人：this._reactInternalInstance._currentElement._owner.getName()
请注意：如果您需要访问父组件的名称，它可能仅在开发阶段有效，您的源代码不会通过代码压缩器（即 WebPack）被丑化。
在功能组件中怎么做？

【解决方案2】：

你可以从this._reactInternalFiber._debugOwner.type.name获取父组件

【讨论】：

这种方式可以在prod中使用吗？是否有财产丢失的风险？
我不建议在生产中使用它，因为它是 react 的内部属性。

【解决方案3】：

您可以使用以下方式访问组件的父节点：

this._reactInternalFiber.return.stateNode

【讨论】：

【解决方案4】：

使用react@^17.0.1，这在调试模式下对我有用：

const parentName = this._reactInternals?._debugOwner?.elementType?.name;

如果您使用的是其他版本的 react，您可以尝试使用 console.log(this) 并在对象中导航，直到找到您想要的。

【讨论】：

这是类组件的解决方案

【解决方案5】：

如果你使用Functional Components（在 React 16+ 中），你可以通过这种方式访问父级：

React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.return.type

而且你可以在嵌套对象中继续往前击中每个祖先。

注意：使用道具当然是正确的方法。但是，可能会有一些调试用例（或全局插件？）来执行此操作。例如why-did-you-render 使用这种方法here。

【讨论】：

【解决方案6】：

我正在使用带有功能组件的 React 18，ReactCurrentOwner 对我来说是 null。相反，我使用了：

const stack = React["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"].ReactDebugCurrentFrame.getCurrentStack()

在我的组件渲染函数内部（实际上在我的自定义钩子内部），它捕获了该组件的完整堆栈跟踪。对于调试哪些组件触发了某些操作非常有用，因为事件处理程序可以引用stack function-local var。

【讨论】：