我想在子组件中获取父组件名称以在验证该子组件的属性时显示错误消息。我正在创建一个可重用的组件，因此任何人都可以在他们的组件中使用我的组件。当他们使用我的组件时，我想显示带有父组件名称的警告消息。
是否有特定的方法可以在 react.js 中获取父名称。任何形式的帮助将不胜感激。
React Access 父组件名称
IT技术
reactjs
2021-04-21 06:30:17
4个回答
孩子们可以通过以下方式看到他们组成的上下文：
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._reactInternalFiber._debugOwner.type.name
您可以使用以下方法访问组件的父节点：
this._reactInternalFiber.return.stateNode
使用react@^17.0.1，这在调试模式下对我有用：
const parentName = this._reactInternals?._debugOwner?.elementType?.name;
如果您正在使用其他版本的 react，您可以尝试执行console.log(this)并浏览对象，直到找到您想要的内容。