使用React 15或更低版本时

Question

假设我在应用程序的几个不同位置渲染了MyComponent。有人传递了错误的道具，从而导致组件代码中的错误。我暂停了该错误，但我不知道的是：是什么组件导致了我？哪个组件呈现了该组件？有什么方法可以查看导致该渲染的组件实例的“堆栈跟踪”？

Answer 1

是的，在这里看看：https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#component-stack-traces

基本上，您可以使用componentDidCatch。

使用React 15或更低版本时

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

Answer 2

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

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

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

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

找出谁在调试React时呈现组件

2 个答案:

使用React 15或更低版本时