【问题标题】:How to get parent component's name in React?如何在 React 中获取父组件的名称?
【发布时间】:2015-04-01 13:45:16
【问题描述】:

我想为我的一些组件提供很好的错误消息,就像 React 一样,例如:

警告:数组中的每个孩子都应该有一个唯一的“key”道具。 检查 MyComponent 的渲染方法。请参阅fb.me/react-warning-keys 了解更多信息。

此消息提供有关错误上下文的一些信息。我知道我可以在调试器中找到它,但我想让我和我的程序员同事更轻松地进行调试。

【问题讨论】:

  • 你需要这个有什么理由吗? React 组件作用于它们接收的属性和它们的内部状态,而不是它们所属的层次结构。不确定打印父组件是否有助于调试,
  • 我创建了一个用于处理 Promise 的组件。我喜欢它,但最终我几乎在任何地方都使用它,所以我想改进它的错误处理。
  • 我假设 Promise 处理程序是由父组件发送的,如果是这种情况,那么由于大多数问题都源于处理程序,而且这些问题都在父级,你知道你在哪里。

标签: error-handling reactjs


【解决方案1】:

虽然尚不清楚如何将其与您在评论中提到的 Promise 组件一起使用,但您可以试试这个:

var componentName = this.constructor.displayName || this.constructor.name || undefined;

它的灵感来自 ReactJS 代码中的 this 函数,该函数在 React 元素验证期间查看构造函数以构建名称。

但是,如果您想要父母的姓名,则无法通过任何记录在案的方式实现,并且如果您根据特定的内部实现构建代码,则可能会很脆弱。这是一种单向的信息流,因此子级不需要通过正常架构链接到其父级。

如果您需要父名称,则需要获取该值并将其传递给我确定不可取的子代。

【讨论】:

  • this.constructor.displayName 打印此组件名称(这很好,但不是我想要的,因为我想要父名称),constructor.name 对我来说始终是 Window(很可能你的意思是this.constructor.name 那里)。
  • 明白了。我不明白你想要什么样的父母的价值,因为它没有在你的问题中描述(这个例子显示了我提供的东西)。我已经更新了我的答案,说不可能使用任何支持的方式。
  • 功能组件怎么样?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-20
  • 1970-01-01
  • 2014-03-17
  • 1970-01-01
相关资源
最近更新 更多