<p dir="auto">I apologise for raising this issue again, I'm not intending to be annoying or disrespectful by this, but my previous issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="331857993" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/13034" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/13034/hovercard" href="https://github.com/facebook/react/issues/13034">#13034</a> was closed with a suggestion which I believe not does mitigate the feature request.  I'm simply not aware if I should take the hint and go away, if there's a bit of a backlog and I should hang in there, or if it's been missed.  I'm assuming the latter, but beg forgiveness if that is not the case.  Should you want me to go away I will do so :)  Thanks.</p>
<p dir="auto">I'm trying to build a container component and child component, whereby the children can sit anywhere in the hierarchy beneath the container, but know their relative order/index within that hierarchy.</p>
<p dir="auto">My use-case is to build a helper wrapper for CSS grids, allowing subcomponents to themselves render a "row" component which knows it must be the next index, and may or may not progress the row counter for the next "row" component found in order.</p>
<p dir="auto">I've looked into two possible avenues - recursing using React.Children on the component, which stops when it hits a component without props.children (e.g. a redux-connect()-ed one), and passing some means of counting via context, which fails because it seems the render() methods of the child components isn't always called in "DOM order".</p>
<p dir="auto">More background here - <a href="https://stackoverflow.com/questions/50776933/react-get-component-order-within-hierarchy" rel="nofollow">https://stackoverflow.com/questions/50776933/react-get-component-order-within-hierarchy</a></p>
<p dir="auto">It would be great to have some feature in React which might allow for this.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/aweary/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/aweary">@aweary</a> had previously suggested in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="331857993" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/13034" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/13034/hovercard" href="https://github.com/facebook/react/issues/13034">#13034</a> that context could do this with nesting, however I'd raised the thought that this would give an indication of recursion depth, not relative position.</p>
<p dir="auto">Hey,</p>
<p dir="auto">It seems like there is currently no way to take two mounted component instances and tell which one of them is coming earlier in the application structure (they could have been mounted asynchronously, and tracking the instantiation/render/mount time is not enough). Ideologically I cannot traverse the application tree, that is understandable.</p>
<p dir="auto">Though, the relative positions are needed sometimes. My use case — I track focusable elements in the application using context (each focusable element reports of its existence to a focus manager which is provided by the context). This is needed to be able to limit the focusablility/accessibility of all elements which are outside of the currently shown modal dialog/popup so that the focus is trapped inside. For the sake of better accessibility, I need to automatically focus first focusable in the modal dialog when I'm in the keyboard navigation mode. So, I have the references to all focusable elements inside the dialog, but I cannot tell which one comes first using public React API. For web there is a workaround to findDOMNode and compareDocumentPosition(), but that doesn't work with React Native.</p>
<p dir="auto">Can we have something similar to compareDocumentPosition() but for React component instances?</p>
<p dir="auto">Thanks!</p>