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

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

这是 an example .

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

---

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