Question

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

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

Answer 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;

不要相信这是父母与孩子的交流，就像站在一个房间里，从你所在的墙上看到的......这不是与你（孩子）沟通的容器（父母），而是孩子的情境意识

请使用此方法，但请注意，它是对内部实例作出反应的一部分并且可能会发生变化（相信它在今天已经足够稳定了。）

在移动设备上表示格式化。

Answer 2

您所描述的是父母与孩子的沟通，只需使用props

将父母姓名传递给孩子。

Answer 3

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

this._reactInternalFiber.return.stateNode

Answer 4

您可以从this._reactInternalFiber.return._debugOwner.type.name中获取父组件

Answer 5

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

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

如果您使用的是其他版本的 react，您可以尝试执行 console.log(this) 并浏览对象，直到找到您想要的内容。

React Access父组件名称

5 个答案: