0

我需要一种方法来跟踪页面呈现时的所有组件调用，例如，如果我的页面如下：

<MyPage>
   <A />
   <B>
      <B2/>
      <B3>
   </B>
   <C /> // witch the component C, calls D in its own code
</MyPage>

和 C 就像：

<C>
   <D />
</C>

类似的东西，需要调用一堆嵌套组件来渲染页面，我需要所有这些组件的列表，在这个例子中，我需要（A，B，B2，B3，C，D），

这可能吗？

4

2 回答 2

1

你看过 React 开发者工具插件（Chrome、Firefox）吗？这将为您的开发人员工具添加一个“组件”选项卡，如下所示：

React 开发者工具截图

然后，您还可以选择任何组件以获取有关它的更多详细信息。

于 2021-03-03T16:22:01.043 回答
0

就像你问一些已经在 React Chrome 扩展中完成的事情，这是一个开源项目。当你查看它的 main.js 文件时https://github.com/facebook/react/blob/master/packages/react-devtools -extensions/src/main.js 其中有一些值得注意的导入

导入 { getAppendComponentStack, getBreakOnConsoleErrors, getSavedComponentFilters, getShowInlineWarningsAndErrors, } from 'react-devtools-shared/src/utils';

我认为您需要的是必须在 getAppendComponentStack 实用程序中。请检查此https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/utils.js

当然，您将通过一些分析来锻炼解决方案..

#使用手机版..请以答案格式为准。

于 2021-03-03T17:08:05.393 回答