有没有办法通过名称访问 React 组件?例如,使用 React devtools,我可以搜索组件并使用以下命令访问控制台中最近选择的组件$r
。有没有办法在没有 React 开发工具的情况下访问这些组件? IE。我可以使用查询来获取这些组件吗?
更多信息:我有兴趣为使用 React 的特定网页编写 chrome 扩展。我知道我想要与之交互的组件的名称,但我只是不确定如何实际访问它。
这是一个遍历 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
取自此回购协议
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)