javascript - 通过名称获取 React 组件

Question

有没有办法通过名称访问 React 组件？例如，使用 React devtools，我可以搜索组件并使用 $r 访问控制台中最近选择的组件。有没有办法在没有 React 开发工具的情况下访问这些组件？ IE。我可以使用查询来获取这些组件吗？

更多信息:我有兴趣为使用 React 的特定网页编写 chrome 扩展。我知道我想要与之交互的组件的名称，但我只是不确定如何实际访问它。

Answer 1

这是一个遍历 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

taken from this repo