javascript - 调试 React 时找出谁在渲染组件

Question

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

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