javascript - 如何可靠地测量 React 组件的弹出框和标注的计算位置？

Question

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

问题

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

标注的目标:

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

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

标注组件:

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

在我的 RightBottomHintBox 组件中，我必须

• 使用document.getElementById()获取尺寸和位置
• 使用守卫来避免尝试访问尚不存在的节点
• 在类属性而不是组件状态中存储尺寸和坐标

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

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

失败的方法

• 当标注的 componentDidMount() 触发时计算尺寸。标注或目标的 DOM 节点通常还不存在

• 当父组件的 componentDidMount() 触发时计算尺寸。同样的问题也存在，此时你无法确定 DOM 节点是否存在。

以上两种方法让我找到了这个线程:When exactly is `componentDidMount` fired?

一篇文章建议，要确保所有 DOM 节点都已准备就绪，您必须转到顶部组件。我不喜欢这种方法，因为它会破坏封装和关注点分离。

另一个线程，How can I respond to the width of an auto-sized DOM element in React? ，建议使用 react-measure库进行测量，这可能有用，但对于我的特殊情况，我想避免管理另一个库，因为这个应用程序很小。

背景上下文

我正在创建一个页面，允许用户输入学生家长的电子邮件地址列表。初始页面列出了已输入的学生和家长的电子邮件地址。但是，用户第一次访问此页面时，可能会出现一个学生列表，但没有家长电子邮件地址。我想向用户提供一个提示，他们应该单击“连接 parent ”按钮以打开一个向导来指导用户输入数据。

Answer 1

我又一次失败的尝试here这可能会刺激某人找到正确的解决方案。

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。