To see how react-devtools traverses the React component tree, the most helpful file is probably the following:
- When I inspected it: https://github.com/facebook/react/blob/34527063083195558f98108cde10b5d6ad0d6865/packages/react-devtools-shared/src/backend/renderer.js
- Latest version: https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/backend/renderer.js
$0 // dev-tools -> Elements -> selected DOM element
$r // React DevTools -> Components -> selected React component
let domFiber = dom[Object.keys(dom).find(a=>a.startsWith("__reactInternalInstance$"))]
let compFiber = domFiber.return
//compFiber = compFiber.return(.return+) // if you need to traverse to wrapper/ancestor comps
let comp = compFiber.stateNode
For a more comprehensive helper function, see here: https://stackoverflow.com/a/39165137/2441655
let childCompFiber = childComp._reactInternalFiber
let parentCompDOMFiber = childCompFiber.return // usually a dom-fiber between; if not, remove this line
let parentCompFiber = parentCompDOMFiber.return
//let parentCompFiber = childCompFiber._debugOwner // alternative to .return.return (skips dom-fiber)
let parentComp = parentCompFiber.stateNode
let parentFiber = parentComp._reactInternalFiber
let parentCompDOMFiber = compFiber.child // usually a dom-fiber between; if not, remove this line
let childCompFiber = parentCompDOMFiber.child
let childComp = childCompFiber.stateNode
comp._reactInternalFiber.sibling.stateNode
let isDomFiber = typeof fiber.type == "string"
let isCompFiber = typeof fiber.type != "string" // or: == "function"
Note: This requires the React DevTools extension to be installed.
For more information on how the hook functions operate, see the section of the react-devtools repo that's linked to at the top of this page.
hook = __REACT_DEVTOOLS_GLOBAL_HOOK__
rootFragmentFiber = Array.from(hook.getFiberRoots(1))[0].current
rootCompFiber = rootFragmentFiber.child
rootComp = rootFiber.stateNode
fiberID = 1 // fill in actual value here; not sure yet how to obtain from comp
childFragments = Array.from(hook.rendererInterfaces)[0][1].getOwnersList(fiberID)