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

Question

React v0.14将不再能够通过TestUtils.findAllInRenderedTree遍历根组件内的所有呈现组件 - 将排除DOM组件.

是否有一些更好的做法遍历根组件内的所有组件？

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

这是一个例子。

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

一般来说，除了单元测试或元编程之外，这样做是一种反模式。