React中componentDidMount调用setState的可行场景及DOM节点测量示例

当需要先获取DOM节点的真实尺寸或位置，再渲染依赖这些信息的内容时，就适合在componentDidMount中调用setState——此时DOM已完全挂载，能拿到准确的元素数据。下面是一个定位提示框的简单示例：

import React, { Component } from 'react';

class PositionedTooltip extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tooltipCoords: { top: 0, left: 0 },
      showTooltip: false
    };
    this.targetElement = React.createRef();
  }

  componentDidMount() {
    // DOM挂载完成，获取目标元素的位置信息
    if (this.targetElement.current) {
      const elementRect = this.targetElement.current.getBoundingClientRect();
      // 计算提示框的定位：在目标元素下方居中
      this.setState({
        tooltipCoords: {
          top: elementRect.bottom + 10,
          left: elementRect.left + (elementRect.width / 2) - 50 // 适配100px宽的提示框居中
        },
        showTooltip: true
      });
    }
  }

  render() {
    const { tooltipCoords, showTooltip } = this.state;
    return (
      <div style={{ position: 'relative', margin: '50px' }}>
        {/* 需要测量的目标按钮 */}
        <button 
          ref={this.targetElement}
          style={{ padding: '10px 20px', fontSize: '16px' }}
        >
          点击查看提示
        </button>

        {/* 依赖测量结果渲染的提示框 */}
        {showTooltip && (
          <div
            style={{
              position: 'absolute',
              top: `${tooltipCoords.top}px`,
              left: `${tooltipCoords.left}px`,
              width: '100px',
              padding: '8px',
              backgroundColor: '#2c3e50',
              color: '#fff',
              borderRadius: '4px',
              fontSize: '14px'
            }}
          >
            这是精准定位的提示
          </div>
        )}
      </div>
    );
  }
}

export default PositionedTooltip;

说明 #

• 示例中，按钮是需要测量的DOM节点，componentDidMount里通过getBoundingClientRect()获取它的真实位置和尺寸。
• 基于这些数据计算出提示框的定位后，调用setState更新状态，从而渲染出位置准确的提示框。
• 这种场景下无法在constructor中初始化状态——因为此时DOM还未挂载，拿不到真实的元素数据。

内容的提问来源于stack exchange，提问作者user19551894