javascript - react 和 getClientBoundingRect

Question

我有一段像这样的 React 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>

我希望“grandchild”div 出现在“hilited”span 的正下方和“grandparent”div 的左边缘内，因此我计划通过取 getClientBoundingRect().left 的差值来计算孙子的左侧位置来自祖 parent 和容器元素。

因为这都是由 React 生成的，所以我在创建时没有元素。我猜我需要收集对“祖 parent ”和“容器”的引用，将它们与状态/ Prop 一起传递给“孙子”并在那里进行计算。最初的尝试失败了。

处理这个问题的最佳方式是什么？

编辑:

注意:整个东西需要嵌套。有时“grandchild”会包含自己的文本，其中有一个突出显示的部分，下面嵌套了自己的 grandchild。

Answer 1

我找到了一个 refs 解决方案。

添加此函数作为孙子的引用:

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 解决方案。