如何在没有 TestUtils.findAllInRenderedTree 的情况下遍历所有 React 组件，包括 DOM 组件？答案

【问题标题】：How to traverse all React components including DOM components without TestUtils.findAllInRenderedTree?如何在没有 TestUtils.findAllInRenderedTree 的情况下遍历所有 React 组件，包括 DOM 组件？
【发布时间】：2015-10-06 10:13:50
【问题描述】：

React v0.14 将不再提供通过 TestUtils.findAllInRenderedTree 遍历根组件内所有渲染组件的能力 - DOM 组件将被排除。

有没有更好的做法来遍历根组件内的所有组件？

【问题讨论】：

我是不是问了什么恼人的事情？为什么问题会减分？
一个很好的问题。在 React 中是不可能的，因为这个功能被一些古怪的 React 作者故意否决了。

标签： javascript reactjs

【解决方案1】：

您可以通过遍历子节点来递归遍历节点。

function traverse(node, visitor){
  return _traverse(node, visitor, {level: 0, parent: null});
}

function _traverse(node, visitor, state){
  visitor(node, state);

  if (!node.props) return;
  var children = React.Children.toArray(node.props.children);

  children.forEach((child) => _traverse(child, visitor, {
    level: state.level + 1, parent: node
  }));
}

这里是an example。

您可以将函数修改为映射或过滤器，而不是 forEach。

作为一般规则，除了单元测试或元编程之外，这样做是一种反模式。

【讨论】：

谢谢！实际上，是的，这是针对元编程的——针对 React UI Builder。
这在你想要遍历已经渲染的组件的情况下不起作用 - 渲染完成后组件在 props 中没有子组件。
我猜你应该在componentWillReceiveProps中捕获它，比如componentWillReceiveProps(nextProps){ this.children = nextProps.children }
我不能修改任何组件的代码，另外并不是所有的组件都有componentWillReceiveProps方法，比如DOM组件（div、span等）我需要像之前那样遍历组件在反应开发工具中。其实我是通过hook在他们的代码中找到的，但是如果Chrome中已经启动了DevTools，这个hook就无法访问了。