React Gutenberg自定义区块视频src更新后如何实现用户立即可见？

问题原因 #

HTML5 <video> 元素的src属性变更不会被浏览器自动识别为资源更新信号，仅通过React虚拟DOM更新属性不会触发视频资源重载，因此会出现src已更新但编辑区预览无变化的问题。

实现代码 #

依赖导入 #

import { useRef, useEffect } from '@wordpress/element';
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';

编辑模块核心逻辑 #

// 需提前在block.json的attributes字段中声明videoUrl属性：
// "videoUrl": { "type": "string", "default": "" }
const Edit = ( { attributes, setAttributes } ) => {
    const { videoUrl } = attributes;
    // 创建ref绑定video DOM元素
    const videoRef = useRef( null );

    // 监听videoUrl变更，主动触发视频资源重载
    useEffect( () => {
        if ( videoRef.current && videoUrl ) {
            videoRef.current.load();
            // 可选：编辑区静音自动播放，规避浏览器自动播放策略限制
            // videoRef.current.play().catch( () => {} );
        }
    }, [ videoUrl ] );

    return (
        <div className="custom-video-block">
            { videoUrl && (
                <video 
                    ref={ videoRef }
                    src={ videoUrl }
                    controls
                    muted
                    style={ { width: '100%' } }
                />
            ) }
            <MediaUploadCheck>
                <MediaUpload
                    onSelect={ ( media ) => setAttributes( { videoUrl: media.url } ) }
                    allowedTypes={ [ 'video' ] }
                    render={ ( { open } ) => (
                        <Button onClick={ open } variant="primary">
                            { videoUrl ? '更换视频' : '选择上传视频' }
                        </Button>
                    ) }
                />
            </MediaUploadCheck>
        </div>
    );
};

注意事项 #

• 所有视频地址的变更必须通过setAttributes更新区块属性，禁止直接操作DOM修改src，否则会出现区块状态与视图不同步的问题
• 如果你使用<source>子标签配置视频地址，逻辑无需调整，依然调用外层video元素的load()方法即可生效
• 如遇跨域预览异常，确认视频资源和WordPress后台域名一致，或资源配置了正确的CORS访问头

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