按名称获取React组件

时间:2015-09-05 06:06:25

标签: javascript reactjs

有没有办法按名称访问React组件?例如,使用React devtools,我可以使用$r搜索组件并访问控制台中最近选择的组件。有没有办法在没有React devtools的情况下访问这些组件?即我可以使用一个查询来获取这些组件吗?

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

2 个答案:

答案 0 :(得分:1)

这是一个遍历并转换为树结构的函数的函数。只需使用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

答案 1 :(得分:0)

如果您不想垂直构图,可以使用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作为道具。

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