Question

我正在尝试在浏览器开发工具的render方法内使用Context API Consumer调试组件。如果我在Consumer块中放置断点，则由于this为undefined，因此无法在控制台上动态打印道具等。通常，运行此命令可以正常运行，但是在调试时，this的唯一值为undefined。以下是组件的示例渲染方法。

  componentMethod = () => {
      console.log(this.props.name); //Placing breakpoint here, value is this is defined
  }

  render() {
        return (
            <div className={styles.container}>
                <div>
                    <h4>{this.props.name}</h4>
                </div>
                <div className={styles.block}>
                    <MyComponent.Consumer>
                        {
                            ({ firstParam, secondParam }) =>
                                <AotherComponent
                                    firstParam={firstParam}
                                    secondParam={secondParam}
                                    thirdParam={this.props.name}
                                />
                        }
                    </MyComponent.Consumer>
                </div>
            </div>
        )
  }

我可以在这里使用相关的粗箭头，但是我可以在componentMethod中使用断点时获得此值。是否有办法bind this阻止Consumer？

Answer 1

尝试一下，但是，您的问题没有为您要解决的问题提供足够的背景信息。如果您也共享Provider实现以及在哪里使用它，那会更好。

render() {
        const { name } = this.props;
        return (
            <div className={styles.container}>
                <div>
                    <h4>{name}</h4>
                </div>
                <div className={styles.block}>
                    <MyComponent.Consumer>
                        {
                            ({ firstParam, secondParam }) =>
                                <AotherComponent
                                    firstParam={firstParam}
                                    secondParam={secondParam}
                                    thirdParam={name}
                                />
                        }
                    </MyComponent.Consumer>
                </div>
            </div>
        )
  }

Answer 2

您似乎有兴趣了解执行过程中消费者将传递给组件的哪些内容。有两种方法可以实现它。

硬道

让我们细分消费者的工作方式（使用您的样本）。这可以帮助您找到合适的调试位置。

在您的render()方法中，您有一个<MyComponent.Consumer>调用。新的Context Consumer API建立在render-prop pattern上。

关于render-prop模式要记住的重要一点是：这是一个function调用。此函数应该返回一些在渲染树时可以考虑的反应。

由于这是一个函数调用，因此您可以将console.log语句放在元素之前。不过，您将不得不添加一个明确的return语句。

在您的方法中为什么它是undefined。我假设componentMethod不是生命周期方法，因此根据您使用如何的方式，this或this.props可能未定义。我看不到您的render方法中的任何地方调用它。

轻松（y / ier）方式：

使用react dev tools浏览器扩展名。您可以按 name 查找所有组件。单击它们，您可以看到道具和状态，甚至上下文（据我所记得）。您甚至可以更改值，然后对它做出反应反应！

React Context API Consumer块中的调试器-这是未定义的

2 个答案:

硬道

轻松（y / ier）方式：