这是一个遍历react组件层次结构并将其转换为树结构的函数。只需访问组件的名称c.constructor.name：

const {
  isDOMComponent,
  getRenderedChildOfCompositeComponent,
  findRenderedComponentWithType
} = React.addons.TestUtils;

function traverse(c, node) {
  if (isDOMComponent(c)) {
    return;
  }

  node.children.push({
    name: c.constructor.name,
    children: []
  });

  const ccc = getRenderedChildOfCompositeComponent(c);

  if (isDOMComponent(ccc)) {
    React.Children.forEach(ccc.props.children, function traverseCompositeChildrenOf(child) {
      if (child.type) {
        const cccc = findRenderedComponentWithType(ccc, child.type);
        traverse(cccc, getNode(node, c.constructor.name));
      }
    });
  } else {
    traverse(ccc, getNode(node, c.constructor.name));
  }
}

像这样使用它：

const root = React.render(<Root/>, document.createElement('div'));

let tree = {
    name,
    children: []
};

let tree = traverse(root, tree); // your component hierarchy by name in a tree

取自这个回购

如果您不想要垂直组合，可以使用ref.
否则，在后代访问祖先组件的情况下，它们是作为props传递的引用，或者在祖先访问后代组件的情况下保留在范围内。

https://facebook.github.io/react/docs/more-about-refs.html Refs 原则上允许更多的水平组合，但实际上如果你做了很多这样的事情，你可能想要考虑你的数据模型，并且诸如 Flux / 单向数据流之类的实现。这实际上是来自文档的指针；他们建议您仔细考虑数据结构和状态。（见https://facebook.github.io/react/docs/more-about-refs.html#cautions）

在您的情况下，我建议将一个函数作为 prop 传递给所有组件，在那里它们可以触发状态更改以设置最近查看的组件。你只需要向他们传递一个唯一的 id 作为props。

[...] 假设您可以控制组件对被选择的编程响应，您应该向所有组件传递一个位于公共祖先组件中的公共处理程序函数。它将唯一标识组件的索引作为参数。该函数会更新状态，React 会发出一个新的渲染周期。