您如何可靠地测量React组件的弹出窗口和标注的计算位置？

本文介绍了您如何可靠地测量React组件的弹出窗口和标注的计算位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用react和react-bootstrap。我想知道是否有比我想出的更好，更干净，更惯用的方法。

I'm using react and react-bootstrap. I want to know whether there's a better, cleaner, more idiomatic approach than what I've come up with.

我想放置一个弹出窗口标注，该标注指向我页面上的一个按钮，该按钮提供了有关用户应从何处开始其工作流的提示。用户随后可以消除此弹出窗口。我花了很长时间才弄清楚这种 -y方法来测量元素的尺寸和位置以正确放置标注：

I want to position a popover callout that points to a button on my page that provides a hint for where the user should start their workflow. The user can subsequently dismiss this popover. It took me a long time to figure out this hack-y approach to measure the elements' dimensions and positions to properly position the callout:

标注：

<Button
  bsClass="button"
  className="button-blue"
  id="connectParentsButton"
  onClick={( event ) => { this.handleOpenInviteParents( event );}}
  ref={( input ) => { this.connectParentsButtonRef = input; }}
>
  + Connect Parents
</Button>

想法是使用 ref 将目标存储为父React组件的属性，然后从同级标注组件访问它以执行测量。

The idea is to use ref to store the target as a property of the parent React component, and then access it from the sibling callout component to perform the measurements.

标注组件：

<RightBottomHintBox
  isShow={this.state.isShowConnectParentsHint && !this.state.isDismissHideConnectParentsHint}
  target={this.connectParentsButtonRef}
  id="connectParentsHint"
  onHide={this.handleHideConnectParentsHint}
/>

在我的 RightBottomHintBox 组件中，我必须

使用 document.getElementById（）获取尺寸和位置

使用警惕避免尝试访问尚不存在的节点

在类属性而不是组件状态中存储尺寸和坐标

use document.getElementById() to get dimenions and positions
use guards to avoid trying to access nodes that don't exist yet
store dimensions and coordinates in class properties rather than component state

而且我必须在标注的 render（）中执行此操作，以确保即使未显示标注组件也已挂载，以便DOM节点存在并且可以正确测量。

And I have to do this in the callout's render() to ensure that my callout component gets mounted even if it's not displayed, so that the DOM node exists and can be correctly measured.

let myStyle = this.props.isShow ? {} : { visibility: 'hidden' };

失败的方法

计算维度当标注的 componentDidMount（）触发时。当父组件的 componentDidMount时，标注或目标的DOM节点通常还不存在
Failed approaches
- computing dimensions when the callout's componentDidMount() fires. The DOM nodes of either the callout or the target are often not yet there
  计算维度（）触发。存在相同的问题，您不能确定DOM节点是否存在。
  computing dimensions when the parent component's componentDidMount() fires. The same problem exists, you can't be sure that the DOM nodes exist at this point.
  以上两个方法将我引向这个线程：
  The above two approaches led me to this thread: When exactly is `componentDidMount` fired?
  一篇文章建议确保所有DOM节点都准备就绪，您必须使用 top 组件。我不喜欢这种方法，因为它会破坏关注点的封装和分离。
  One post suggests that to be sure that all DOM nodes are ready, you'd have to go up to the top component. I don't like this approach because it would break encapsulation and separation of concerns.
  另一个线程，，建议使用库进行测量，这可能有用，但对我而言在这种情况下，我想避免因为该应用程序很小而需要管理另一个库。
  Another thread, How can I respond to the width of an auto-sized DOM element in React?, suggests using the react-measure library to do measurements, which might work, but for my particular case, I wanted to avoid having another library to manage because this app is small.
  我正在创建一个页面，该页面允许用户输入学生父母的电子邮件地址列表。初始页面列出了已经输入的学生和家长的电子邮件地址。但是，用户第一次访问此页面时，可能会有一个学生列表，没有父电子邮件地址。我想向用户提供提示，他们应该单击连接父母按钮以打开向导来指导用户输入数据。
  I'm creating a page that allows the user to input a list of students' parents' email addresses. The initial page lists students and parents' email addresses that have already been input. However, the first time the user comes to this page, there may be a list of students, with no parent email addresses. I want to provide a hint to the user that they should click on 'Connect Parents' button to open up a wizard to guide the user in data input.
  推荐答案
  我在尝试失败，这可能会促使某人寻求正确的解决方案
  I have another failed attempt here that may spur someone to the correct solution.
```
export function getSize(cpt) {
    var elem = document.getElementById("ruler");
    const html = ReactDOMServer.renderToStaticMarkup(cpt);
    elem.innerHTML = html;
    return [elem.scrollWidth, elem.scrollHeight];
}

var Foo = React.createClass({
  componentDidMount() {
    const sz = this.elem.getBoundingClientRect();
    ReactDOM.render(<span>{ [sz.width,sz.height].join("x") }</span>,
                    document.getElementById('actual'));
  },
  render() {
    return <div ref={e => { this.elem = e; }} className="content">
             <p> Bar!! BAZ </p> <p> another line </p> </div>;
  }
})
```
  设置getSize渲染为任何div（在屏幕上或在屏幕上）可以得到大约76x84，而componentDidMount报告的实际大小（并由开发工具确认）为188x52。
  Setting up getSize to render into any div (onscreen or off) gives about 76x84, while the actual size reported by componentDidMount (and confirmed by dev tools) is 188x52.
  
  这篇关于您如何可靠地测量React组件的弹出窗口和标注的计算位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

hint