title: React: get DOM position for one of the children of component
body: <p>I have a very annoying issue, and I need help with my component. It is used in such context:</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;/* ... */&lt;/thead&gt;
    &lt;tbody&gt;
      &lt;COMPONENT&gt;
        &lt;ChildComponent&gt;/* ... */&lt;/ChildComponent&gt;
        &lt;ChildComponent&gt;/* ... */&lt;/ChildComponent&gt;
        &lt;ChildComponent&gt;/* ... */&lt;/ChildComponent&gt;
      &lt;/COMPONENT&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>ChildComponent</strong> is a component that includes other components but eventually renders simple HTML's <code>&lt;tr&gt;</code></p>
  
  <p>inside <strong>component.tsx</strong>, I need to get DOM values (offsetTop and clientHeight) for n-th child.</p>
  
  <p>I've tried many things:</p>
  
  <ul>
  <li><code>ReactDOM.findDOMNode(children[n])</code> gives me:</li>
  </ul>
  
  <blockquote>
    <p>argument appears to not be a ReactComponent. Keys: $$typeof, type, key, ref, props, _owner, _store</p>
  </blockquote>
  
  <ul>
  <li><code>children[n].ref</code> just gives me null</li>
  <li>cannot add ref to children</li>
  <li>This sort of works:</li>
  </ul>
  
  <pre><code>children.map((child, index) =&gt;
      index === n ? (
          &lt;div style={{display: contents}} key={index} ref={ref}&gt;
      ) : child
  )
  </code></pre>
  
  <p>gives me warning (but works!):</p>
  
  <blockquote>
    <p>index.js:2178 Warning: validateDOMNesting(...):  cannot appear as a child of .
        in tr (created by FoldControlContainer) ...</p>
  </blockquote>
  
  <p>is there a better solution? I've tried to use &lt;>,  or other "transparent" to DOM components instead of <code>div</code>, but it didn't work.</p>