Javascript 查找调试时呈现组件的用户

假设我在应用程序中的几个不同位置呈现了

MyComponent

。有人传递了错误的道具，导致组件代码出错。我暂停了对错误的讨论，但我不知道的是：哪个组件渲染了我？哪个组件渲染了那个组件？有没有办法查看导致此渲染的组件实例的“堆栈跟踪”？

您可以使用React-chrome devtools插件查看渲染的组件树。目前在这里：

选择组件时，您甚至可以看到提供的道具

例如，如果您需要有关中断的调试器信息，您可以使用reacts错误检查机制（根据Nikitas的回答）

是，请查看此处：

基本上，您可以使用

组件didcatch

使用React 15或以下时 类MyComponent扩展了React.Component{ fallbackProps={color:“red”}； render（）{ const propsAreCorrect=checkProps（this.props）； 如果（！propsAreCorrect）警报（“啊，发生了不好的事情！”）； const-props=propsAreCorrect？this.props:this.fallbackProps； 返回； } }

---

我认为这是正确的答案。你能用正确的链接更新它吗？但是有一件事，它似乎给了你组件类，而不是组件实例，对吗？不幸的是，我现在还停留在React 14上，所以我无法尝试。如果你没有React 16，我可以想出两种其他方法。您可以将情况升级，让错误上升到顶部，然后检查跟踪。或者你可以处理组件本身的坏道具，退回两个一组错误道具，然后以某种方式注册到开发人员：嘿，我拿错了道具，请看着我。@Conpartist6我编辑了我的答案，希望这个解决方案适合你的问题。如果是的话，你可以考虑把它提取到一个单独的HOC中？我很确定这只是道具类型，在旧版本的React渲染中是完全同步的，因此您可以查看堆栈跟踪并找到引用的组件。这只是一个PITA。我知道我可以看到渲染的组件树，但这不是很好，因为根据定义，它已经被渲染而没有错误。我在问什么时候有错误。

class MyComponent extends React.Component {
  fallbackProps = {color: "red"};

  render() {
    const propsAreCorrect = checkProps(this.props);
    if(!propsAreCorrect) alert("aah, something bad happend!");

    const props = propsAreCorrect ? this.props : this.fallbackProps;
    return <div color={props.color}></div>;
  }
}