如何在Gutenberg中获取区块DOM元素以获取其渲染宽度？

问题分析 #

你当前的代码存在几个关键问题导致无法获取DOM引用：

• 函数组件中使用createRef会在每次渲染时重新创建引用，无法持久化；
• blockProps的合并方式错误，直接展开rootBlockRef不会正确绑定ref；
• 在组件渲染时直接打印ref，此时DOM还未挂载，所以返回null。

正确实现方案 #

以下是修正后的代码，通过useRef和useEffect正确获取区块DOM并读取宽度：

import { useRef, useEffect } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';

export default function Edit(props) {   
    // 用useRef持久化DOM引用，函数组件中优先使用useRef而非createRef
    const rootBlockRef = useRef(null);
    // 将ref绑定到blockProps，这是Gutenberg推荐的传递方式
    const blockProps = useBlockProps({ ref: rootBlockRef });

    // 使用useEffect在DOM挂载后访问ref
    useEffect(() => {
        if (rootBlockRef.current) {
            // 获取区块的渲染宽度
            const blockWidth = rootBlockRef.current.offsetWidth;
            console.log('区块渲染宽度:', blockWidth);
            // 这里可以根据宽度执行你的逻辑
        }
    }, []); // 空依赖数组确保只在组件挂载后执行一次

    return (
        <div {...blockProps}>TEST</div>
    );
}

额外说明 #

• 避免使用document.querySelector：Gutenberg编辑界面的DOM结构有多层嵌套，直接查询可能无法精准定位到你的区块，且组件未挂载时查询会返回null；
• 如果需要监听宽度变化（比如窗口 resize），可以在useEffect中添加 resize 事件监听，并在组件卸载时移除：

useEffect(() => {
    const handleResize = () => {
        if (rootBlockRef.current) {
            const blockWidth = rootBlockRef.current.offsetWidth;
            console.log('更新后的区块宽度:', blockWidth);
        }
    };

    if (rootBlockRef.current) {
        handleResize(); // 初始化时获取一次
    }

    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', handleResize);
}, []);

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