Javascript React和getClientBoundingRect

我有一段类似这样的html：

<div id="grandparent">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas 
 congue ligula ac quam viverra nec consectetur 
 <span class='container' style='position:relative'>
   <span class='hilited'>ante hendrerit. </span>
   <div id='grandchild' style='position:absolute; top:...'>
     Stuff...
   </div>
 </span> 
 Donec et mollis dolor....
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。
不要用钻石。他坐在阿梅特·伊普苏姆·莫里斯旁边。梅塞纳斯
康古拉圣殿酒店
安特·亨德雷特。
东西
Donec et mollis dolor。。。。

我希望“孙子”div正好出现在“hilited”跨度的下方，正好在“祖父母”div的左边缘内，因此我计划通过从祖父母和容器元素中取getClientBoundingRect（）的差来计算孙子的左位置

因为这都是由React生成的，所以在创建时我没有元素。我猜我需要收集“祖父母”和“容器”的参考文献，用状态/道具将它们传给“孙子”，然后在那里计算。最初的尝试失败了

最好的办法是什么

编辑：

---

注意：整个东西需要嵌套。有时“孙子”将包含自己的文本，其中将有一个突出显示的部分，其孙子嵌套在下面。

我找到了一个参考解决方案

将此函数添加为孙子上的ref：

function(el) {
  if (el) {
    var gpar = el.parentElement.parentElement;
    var par = el.parentElement;
    var offset = gpar.getClientBoundingRect().left - 
                 par.getClientBoundingRect().left;
    el.style.left = (offset + 15).toString().concat('px');
  }
}

---

我仍然不介意看到一个纯css解决方案。

首先，您尝试过纯css方法吗？接下来，您可以通过在hilited和孙子上各放置一个ref，然后使用它们在祖辈组件中的componentDidMount方法中定位div。此外，refs不应向下传递到层次结构，这会造成mem泄漏的可能性。纯css将非常好。有办法吗？放一个元素应该是什么样子的截图。然后我们可以讨论可能的css解决方案。